当前位置: 首页 > 面试题库 >

如果使用DOCTYPE,则CSS样式无法正确应用

史智志
2023-03-14
问题内容

1)Css样式无法正确应用于我的HTML页面,如果我在html上添加了特定版本,例如HTML5,HTML4.1
strict等,则如果删除所有DOCTYPE语句,则效果很好。

我的HTML代码(无需DOCTYPE即可正确显示):

<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

我的HTML代码(背景色红色不适用于DOCTYPE):

<!DOCTYPE html>
<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

另外,我尝试使用HTML5而不是HTML5严格,

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

和,

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

但是没有任何一个。如何正确添加版本。

2)也是现在最好的版本。带有XHTML的HTML5或html4.01或HTML 4.01?


问题答案:

问题在于div设置为100%(正文)的100%,这对我们来说是有意义的,但对浏览器而言却不是。如果将主体位置设置为绝对位置并将其上,下,左,右设置为0,则将获得相同的效果,并且div的高度设置将按您期望的方式工作。这是代码。

<!DOCTYPE html>

<html> 
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>


 类似资料:
  • 问题内容: 我想申请到它是否有元素。 到目前为止,我已经将样式应用于元素(如果存在)。但我想的,如果有,仅使用。 以下是 该代码 问题答案: CSS3不可能。有一个建议的CSS4选择器,可以做到这一点,它看起来像这样(选择元素): 作为替代方案,使用jQuery,您可以利用的单行代码是这样的: 然后,您可以继续在CSS中设置样式。

  • 问题内容: 如果我在外观中使用样式,则将无法使用。 我该如何解决?我在说这个样式代码: 问题答案: 不幸的是,Outlook支持与IE5兼容HTML大致相同的功能。这 真是 太可怕了。这是有关Outlook 2007中Word 2007HTML和CSS呈现功能的详细MSDN文章,我认为对于Outlook 2010而言,它变化不大。 老实说,我能够使Outlook HTML看起来像我想要的唯一方法是

  • 问题内容: 我有一个带有div的html页面,这些div的 ID 为 s1 , s2 等形式。 我想将CSS属性应用于这些部分/ div的子集(取决于id)。但是,每次添加 div时 ,都必须像这样分别为该部分添加css。 css中是否有类似正则表达式的内容,可用于将样式应用于一组 div 。 问题答案: 您可以设法选择那些元素而无需任何形式的正则表达式,如先前的答案所示,但是要直接回答问题,可以

  • (?:x) (x) 这两个好像可以平价替换的吧。有什么特殊应用吗?

  • 我有一个问题,我的应用程序中有两个主题。黑暗主题和光明主题 问题是,如果我将应用主题设置为与系统主题不同,则应用主题无法正确加载。 Light主题继承自: 黑暗主题继承自: e、 g.如果系统主题为浅色,而应用程序主题使用从“主题”继承的深色主题。材料组件。NoActionBar'则主题将无法正确呈现,反之亦然。 我使用的是values night目录,它保存了黑暗主题中使用的所有颜色。

  • 问题内容: 我想仅使用CSS为标准window.confirm设置样式,而不使用任何其他JavaScript代码。可能吗 如果是的话,我该怎么办? 问题答案: 这不可能。浏览器使用平台的UI套件显示此窗口。它不在DOM中,在CSS或Javascript中也不可见,您无能为力。 但是,一些非常简单的jQuery代码可以解决问题。怎么样