文章/答案/技术大牛

发布

社区首页 >问答首页 >Chrome表格列表渲染错误

问Chrome表格列表渲染错误
EN

Stack Overflow用户

提问于 2013-05-09 07:03:23

回答 1查看 430关注 0票数 1

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

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

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

下面是一个与重现问题的超文本标记语言一起显示的链接：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>

html

google-chrome

html-lists

html-table

回答 1

Stack Overflow用户

发布于 2014-01-07 09:20:09

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16451655

复制

相似问题

问Chrome表格列表渲染错误
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome表格列表渲染错误EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome表格列表渲染错误
EN