4

这是一个代码：

<!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 中显示不符合预期。

火狐：（好的）

http://i45.tinypic.com/t6fexy.jpg

IE8：（错误）

http://i47.tinypic.com/2naslqp.jpg

有人可以解释为什么吗？

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

4

2 回答 2

2

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

li div { 
  display:inline;
}
于 2013-07-11T17:30:09.710 回答
0

您可以添加相对于“li”标签的位置并更改相对于“div”标签的绝对位置并添加“顶部：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
}
于 2013-02-20T08:13:36.647 回答