为什么IE8会忽略子元素的边距?

时间:2015-11-05 10:24:09

标签: css internet-explorer

当我在以下代码中向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>

1 个答案:

答案 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时就很短,很清晰并且得到了支持。

&#13;
&#13;
<!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;
&#13;
&#13;

还应注意,您需要使用正常的引号而不是针对属性值的引号,并且需要关闭html标记。