Question

我倾向于认为这是Chrome中的一个错误（为什么子元素上的样式会影响父元素？），但可能还有其他事情发生，我不理解。< / p>

下面的有序列表中有1个项目，在Firefox和IE10中编号（尽管在IE中，它的位置错误）。但在Chrome中，数字完全隐藏。

＆＃13;

ol {
  list-style-position: outside;
}
div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
}

＆＃13;

<ol>
  <li>
    <div>Some text that trails off</div>
  </li>
</ol>

＆＃13;

发生了什么/这是一个错误/可以解决这个问题吗？

Answer 1

嗯，这是一种黑客攻击，但它确实有效。添加伪:before - 元素会返回列表样式，因为li现在会有一些内容。将div带回到顶部，看起来没有任何变化。

<强> CSS

ol > li:before {
    content: '';
    display: block;
    height: 1px;
}

div {
    margin-top: -1px;
}

<强>演示

Try before buy

Answer 2

这不是一个错误可以说，不同的浏览器引擎如何渲染CSS的差异。（Blink vs Trident vs Gecko vs WebKit等）

从技术上讲，Chrome浏览器的显示是正确的，因为隐藏了div以外的所有内容（{1}}。

如果您使用Chrome检查器，则可以看到元素边缘的位置以及数字在该区域之外的位置。

你最好的解决方法是设置一个额外的CSS来覆盖主div元素。

overflow: hidden;

ol {
  list-style-position: outside;
}
div {
  overflow: hidden;
}
ol div {
  overflow: visible;
}

Answer 3

如果你需要在li里面使用div，将div显示为内联，否则list-style：inside将起作用。

<ol>
    <li><div>Some text</div></li>
</ol>

    @using (Html.BeginForm("Create", "Recipe", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()

     <label for="photo">Upload photo:</label>
     <input type="file" name="file" id="file" style="width: 100%;" />
    ...
     <input type="submit" value="Upload" />
    }

Answer 4

为这些元素定义选择器。

如果您只是使用全局标记，那么您将开始遇到问题：<li> <div>，特别是因为您在此处嵌套。

例如： <li class="dothis"> <div class="thisdivdoes"> ...

执行此操作后，更容易区分overflow:hidden;在哪里而不是在哪里。

由于您的代码位于<li>范围内，因此您可以单独定义要执行的内容，否则您可能会看到它们在您的体验中相互继承。

另外，请检查HTML5中的doctype我认为它在严格的情况下无效。

溢出：隐藏在有序列表中的div影响li，Chrome bug？

4 个答案: