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表格列表呈現錯誤

回答

相關問題