Chrome表格列表呈现错误

我们遇到了谷歌浏览器中表格单元格内的样式无序列表的布局问题。在Firefox，Safari或Internet Explorer中不会发生此问题。Chrome表格列表呈现错误

无序列表的样式应用于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>

来源

2013-05-08 Grand Avenue Software

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

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

来源

2014-01-07 01:20:09 Iconiu

Chrome表格列表呈现错误

回答

相关问题