奇怪的Chrome問題

Question

我遇到了問題，我非常渴望獲得幫助。

我需要一些原因來分別渲染表頭和表體。每個列和標題單元格都有相同的CSS類（例如.col1_name）。這些CSS類已經宣佈寬度和文本對齊，並以這種方式我確保頭和表格主體單元保持正確對齊。

而且，在IE8和Firefox中一切正常。我對WebKit瀏覽器（Chrome和Safari有問題，Chrome對我很重要）。它們渲染的表格主體單元格的寬度比IE和FF少5px。我無法追蹤這個問題，但是我看到那些-5px寬度在Computed樣式中。

下面是s-shots和一些示例代碼。 IE 8 Is just fine http://img191.imageshack.us/img191/2360/probie8.png

Firefox is just fine http://img705.imageshack.us/img705/661/probff.png

Google Chrome is not so fine http://img199.imageshack.us/img199/5176/probgc.png

Inspecting element ... http://img96.imageshack.us/img96/19/probj.png

<style type="text/css"> 
    .rbr{ width: 45px; text-align: left;} 
    .sifra {width: 90px; text-align: left;} 
    .naziv { width: 240px; text-align: left;} 
    .kolicina {width: 90px; text-align: right;} 
    .cena {width: 60px; text-align: right;} 
</style> 

<table id="tableheader"> 
<thead> 
    <tr> 
     <th class="rbr">RB.</th> 
     <th class="sifra">Sifra</th> 
     <th class="naziv">Naziv</th> 
     <th class="kolicina">Kolicina</th> 
    </tr> 
</thead> 
</table> 
<table id="tablebody"> 
    <tbody> 
    <tr> 
    <td class="rbr">1</td> 
    <td class="sifra">11111112</td> 
    <td class="naziv">Adelante 3 series</td> 
    <td class="kolicina">2.00</td> 
    </tr> 
    <tr> 
    <td class="rbr">2</td> 
    <td class="sifra">86868631</td> 
    <td class="naziv">Canyon CNR</td> 
    <td class="kolicina">1.00</td> 
    </tr> 
    </tbody> 
</table> 

非常感謝人的幫助！

Answer 1

雖然我懷疑你只是有另一個聲明覆蓋你期望的，但可以嘗試添加最小寬度和最大寬度。

Answer 2

您是否嘗試過設置margin和padding？

margin: 0; 
padding: 4px; 

Answer 3

在你的代碼標識爲「表體」，但在Chrome的截圖，它說「表bodypozicije」。 檢查你的css的'table-bodypozicije'的定義 - 這可能是你的課堂風格適用於你的td的。

Answer 4

@NSD你讓我走上正軌。我重新重新查看了我的整個與datagrids一起工作的代碼，發現body table的寬度設置爲auto。

所以，謝謝你們的時間。結論：如果您在Chrome中具有相同的單元格寬度，但表格寬度不同（即xyz px/auto），則會獲得不同的單元格寬度。

再次感謝您的時間。