奇怪的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），则会获得不同的单元格宽度。

再次感谢您的时间。