1

重要的提示！ 我只在运行 Safari 4.0 (528.16) 的第一代 iPhone 上重新创建了这个错误，但是当我试图让我的网站尽可能广泛兼容时，这仍然是一个潜在的问题......

问题：列表中的浮动元素没有出现在屏幕上。我已将问题缩小到以下规则组合：

<html>
<head>
    <style>
        p {
            float: left;
            overflow: hidden;
        }

        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li><p>hello</p></li>
    </ul>
</body>

<li>如果我在后面的标签内放置一个非浮动元素<p>，则 中的文本<p>变为可见。

到目前为止，我已经在 Windows 7 上的最新版本的 Chrome/IE/Firefox、iPhone 4 上的 Safari 和 Android (4.2.1) 上的 Chrome/Firefox/Opera 上对此进行了测试，并且出现了所描述的not问题

我再说一遍：我只看到它发生在 Safari 4.0 上，但由于我无法测试每个平台/浏览器版本组合，我担心这个问题可能会更普遍。

谢谢

4

3 回答 3

1

我也遇到了这个问题，但是我在 Windows 7 的 Safari 5.1.7 中看到了它。

不幸的是，我当前的修补程序是基于 JavaScript 的：

    $('.listContainer').hide();
    $('.somethingElse').hide();
    $('.listContainer').show();

我不完全理解为什么会这样，但只要 .somethingElse 是一个有效的选择器，隐藏/显示操作就不应该被优化掉，实际上会强制 Safari 呈现列表。真正了解其中细节的人可能会提供更优雅的解决方案，但这就是我现在正在使用的技巧。

编辑

奇怪的是，如果我将动态生成的 HTML 静态放入正在处理的 .html 文件中，Safari 中就不会出现渲染问题。在 Safari 中构建 DOM 的方式发生了一些较低级别的事情，这打破了这一点。我也很可能没有遵循一些关于如何将新元素实时添加到 DOM 的标准。

有什么帮助吗？也许我应该添加一个我自己的问题。

最终编辑

好吧，我现在通过 CSS 让它工作了。

解决方案是让列表项溢出：隐藏。

我不知道为什么，但这解决了我的问题。希望它能解决你的问题。试一试。

于 2013-03-06T20:23:41.677 回答
0

当有一堆浮动元素时，父元素将无法正确计算其高度。

毕竟你的浮动元素包括一个空元素如下

<div class="break"></div>

. break{ height: 1px; width: 100%; clear: both; float: none; }

于 2013-03-06T20:25:59.387 回答
0

我认为这里的问题是你有overflow:hidden这就是你的元素超出范围的原因。实际上，如果您有任何指定宽度的元素，overflow: hidden然后您试图隐藏一些内部标签

例如：

<div style='width:200px'>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
</div>

然后，您实际上是在尝试隐藏超出给定 200px 宽度的任何内容，前提是您有内部 div 浮动，以便它们都在同一行/部分或 div 中

于 2013-02-02T17:59:52.790 回答