在IE中,html – inside>显示不正确

这是一个代码:

<!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修复它.

最佳答案 您可以添加相对于’li’标签的位置,并相对于’div’标签的绝对值更改位置,并添加’top:0;左:0;’ 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
}
点赞