1

我们在 Google Chrome 中的表格单元格内遇到了样式化无序列表的布局问题。Firefox、Safari 或 Internet Explorer 不会出现此问题。

无序列表具有应用于左边距和文本缩进的样式。与每个列表项关联的跨度设置为空白的“nowrap”。

当列表项文本跨度足够宽以到达单元格的右侧边缘时，它最终可能会向下移位并且文本将与单元格边框重叠。在 Chrome 中更改缩放设置时最容易出现此问题，但在首次渲染页面或更改窗口大小时也可能发生不可预知的情况。

这是一个显示重现问题的 HTML 的链接：http: //www.grandavenue.com/CodeExamples/chrome_table_list_bug.html

这是问题的图片： Chrome Bug http://www.grandavenue.com/CodeExamples/chrome_td_ul_bug.gif

这是一个重现此问题的示例 html 页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1">
    <tr>
        <td>Column text to left</td>
        <td align="left">
            <ul style="list-style:disc inside none; margin-left: 2.0em; text-indent: -1.5em;">
                <li><span style="white-space: nowrap">Example text that fits</span></li>
                <li><span style="white-space: nowrap">Example text that doesn't fit</span></li>
            </ul>
        </td>
        <td>Column text to right</td>
    </tr>
</table>
</body>
</html>
4

1 回答 1

0

我遇到了同样的问题。我正在使用表格将左对齐的无序列表居中。只有一列一行。表格元素和 TD 元素都定义了宽度，但它选择不使表格足够宽以防止列表测试换行。我可以为表格指定一个静态宽度，但这是不好的编码标准，然后它会根据静态定义的宽度而不是实际的文本宽度来居中文本。幸运的是，这个文本不是动态的，所以我们可以使用静态定义的表格宽度。

其他浏览器不会出现此问题，只有 Chrome。

于 2014-01-07T01:20:09.317 回答