Question

这是一段代码：

<!DOCTYPE html>
<html>
<head>
<style>
    li div {
      border: 1px solid #FF0000; 
      width: 100px; 
      position:relative; 
      white-space: nowrap; 
      overflow: hidden;
    }
</style>
</head>
<body>
    <ol>
        <li>
            <div>111111111111111111111</div>
        </li>
        <li>
            <div>222222222222222222222</div>
        </li>
    </ol>
</body>
</html>

在IE8中显示的页面与预期不符。

Firefox :(好）

IE8 :(错误）

有人能解释一下原因吗？

如果删除<!DOCTYPE html>一切都会好的，但我想找到原因并通过CSS修复它。

Answer 1

您还可以设置div的样式以显示为内联元素：

li div { 
  display:inline;
}

Answer 2

您可以添加相对于＆＃39; 标记的位置，并更改位置相对于绝对的＆＃39; div＆＃39;标记并添加＆＃39; 顶部：0;左：0; ＆＃39; div tag.this工作正常。

试试这个css：

li {
  position:relative;
}
li div {
  border: 1px solid #FF0000; 
  width: 100px; 
  white-space: nowrap;
  overflow:hidden;
  position:absolute;
  top:0;
  left:0
}

<div>里面的<div>在IE </li> </div>中显示不正确

2 个答案: