Question

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

无序列表的样式适用于margin-left和text-indent。与每个列表项关联的跨度对于空白区域设置为“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>

Answer 1

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

问题不会发生在其他浏览器中，只有Chrome。

Chrome表列表呈现错误

1 个答案: