当我在以下代码中向margin
添加.child
时,IE8会忽略它。在现代浏览器中,相同的代码按预期工作。造成这种情况的原因是什么?
<html lang=“de“ xml:lang=“de“ xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=“Content-Type“ content=“text/html“; charset=“iso-8859-1“ />
<title></title>
<style>
.parent {
margin: 5px;
border: 10px solid blue;
position: relative;
}
.child {
margin: 10px;
border: 10px solid red;
padding: 4px;
}
</style>
</head>
<body>
<div class="parent">
<p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD!
<span id="textOutput"></span>
</p>
</div>
</body>
</html>
答案 0 :(得分:1)
问题是你没有提供doctype
,这意味着IE8不知道使用什么渲染模式,因此默认为怪癖模式。 Quirks模式对于网络年轻时使用的旧的非标准布局引擎至关重要:
现在,Web浏览器中的布局引擎使用了三种模式:怪癖模式,几乎标准模式和完全标准模式。在怪癖模式下,布局模拟Navigator 4和Internet Explorer 5中的非标准行为。这对于支持在广泛采用Web标准之前构建的网站至关重要。在完全标准模式下,行为(希望)是HTML和CSS规范描述的行为。在几乎标准模式下,实施的怪癖只有极少数。
Quirks模式和标准模式(https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode)
浏览器以不同的方式处理缺少doctype
的问题,您应该始终确保在HTML的开头指定一个,以确保页面的呈现一致。在撰写本文时,我建议使用HTML5 doctype
,因为它早在IE6时就很短,很清晰并且得到了支持。
<!DOCTYPE html>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
.parent {
margin: 5px;
border: 10px solid blue;
position: relative;
}
.child {
margin: 10px;
border: 10px solid red;
padding: 4px;
}
</style>
</head>
<body>
<div class="parent">
<p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD!
<span id="textOutput"></span>
</p>
</div>
</body>
</html>
&#13;
还应注意,您需要使用正常的引号而不是针对属性值的引号,并且需要关闭html
标记。