<div>标签在IE中嵌套在<li>标签内显示不正确

Question

<div>标签在IE中嵌套在<li>标签内显示不正确

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中，页面显示效果与预期不符。

Firefox：（正常）

IE8：（错误）

有人能解释一下原因吗？

如果移除<!DOCTYPE html>，一切都会正常，但我想找到原因并通过CSS进行修复。

- Alexey Kosov

尝试添加 li { display: block; }。 - Blender

部分解决了问题，但数字从列表中消失了 :( - Alexey Kosov

你在IE浏览器中启用了兼容性视图吗？ - pbaris

2个回答

0

你可以在 'li' 标签上添加 相对定位，并将 'div' 标签的位置从相对定位改为绝对定位，并在 div 标签中添加 'top: 0; left: 0;'。这样就可以正常工作了。

尝试使用以下 CSS：

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

- Jamir Khan

谢谢，但我需要隐藏所有边框之外的内容（http://i48.tinypic.com/21on56p.jpg） - Alexey Kosov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Kline · Accepted Answer

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

li div { 
  display:inline;
}