在计算表格单元格宽度时，Chrome vs FF / IE / Opera？ （表格的布局：固定） [英] chrome vs FF/IE/Opera in calculating table cell width ? (table-layout:fixed)
问题描述
我现在搜索了将近半天......但我无法找出为什么chrome6 / 7似乎是IE8 / FF3.6 / Opera的唯一浏览器，它不会将填充添加到表格单元格的指定宽度。
当然，如果您使用table-layout：fixed，
，这会变得至关重要，因为所有突然间，他们不得不注意指定的px宽度。
好的，最后我的问题：有人知道Chrome为何计算不同，哪个浏览器是正确的（标准符合），并希望有一个优雅的解决方案？
目前，我唯一的解决方案将是一个条件注释与chrome.css在那里我手动添加填充宽度...颤抖......
（顺便说一句：任何人都想知道px宽度不适合web开发...随意离开本页面）
附加：（关于回复 $>
冷杉所有人都感谢您的即时回复......我试图尽可能缩短它，并且因为我将事实减少到了最低限度......但是，正如您所提到的，在web开发中有很多varibales所以我试图澄清......
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 / / ENhttp://www.w3.org/TR/html4/strict.dtd\">
< html>
< head>
< style type =text / css>
div {width：300px; }
table {table-layout：fixed;宽度：100％;高度：50像素; }
td.col1 {width：20px;背景色：蓝色; }
td.col2 {width：40px;背景色：红色; }
td.col3 {width：60px;背景颜色：黄色; }
td.col3 {width：auto;背景颜色：黄色; }
td {padding：5px; }
< / style>
< / head>
< body>
< div>
< table cellpadding =0cellspacing =0>
< tr>
< td class =col1>< / td>
< td class =col2>< / td>
< td class =col3>< / td>
< td class =col4>< / td>
< / tr>
< / table>
< / div>
< / body>
现在如果您切换css line
td {padding：5px; }在不同的浏览器中，你会看到chrome在宽度内包含了填充，而在其他人添加它
希望这有助于澄清和提前感谢
berny
解决方案我有同样的问题，但不幸的是，我没有找到真正的解决方案，但是我发现了另外两个线程，一个bug报告+解决方法。
$ b
主题：
-
=https://stackoverflow.com/questions/4442173/webkit-browsers-not-accounting-for-padding-when-determining-cell-width-in-table-l> Webkit浏览器在确定单元格时没有考虑填充表格布局中的宽度：已修复
错误报告：
https://bugs.webkit.org/show_bug.cgi?id=13339
可能的解决方案：请参阅第二个线程。
I've searched now for almost half a day... but I couldn't find out why chrome6/7 seems to be the only browser in comparison to IE8/FF3.6/Opera that does not add the padding to the specified width of an table cell.
Of course this becomes crucial if you're working with table-layout:fixed,
due to the fact that all of a sudden they have to pay attention to the specified px widths.
Okay finally my question: does anyone know why Chrome calculates differently, and which browser is right (standard conform), and hopefully, is there an elegant solution?
At the moment, my only solution would be a conditional comment with a chrome.css where I add the padding to the width manually ... shiver...
(btw: anyone who feels tempted to tell that px widths are not proper webdeveloping... feel free to leave this page silently)
ADDITION: (in respect to the replys)
first of all thank you for your immediate replys... i was trying to make it as short as possible, and there for i reduced the facts to the minimum... but, as you mentioned, there are a lots of varibales in webdeveloping and so i try to clarify...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
<style type="text/css">
div { width:300px; }
table { table-layout:fixed; width:100%; height:50px; }
td.col1 { width:20px; background-color:blue; }
td.col2 { width:40px; background-color:red; }
td.col3 { width:60px; background-color:yellow; }
td.col3 { width:auto; background-color:yellow; }
td { padding:5px; }
</style>
</head>
<body>
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
</table>
</div>
</body>
now if you toggle the css line
td { padding:5px; }
in different browsers, you'll see that chrome includes the padding, within the width, while the others add it
hope thats helps to clarify and thanks in advance
berny
解决方案 I have the same problem and, unfortunately, I didn't find a real solution, but I found two other threads, a bug report + a work around.
Threads:
Bug report:
https://bugs.webkit.org/show_bug.cgi?id=13339
Possible solution: see second thread.
这篇关于在计算表格单元格宽度时，Chrome vs FF / IE / Opera？ （表格的布局：固定）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
