Html 表格单元格和边框在 IE/Chrome 和 Firefox/Opera 中的显示方式不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/701332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table cell and border displaying differently in IE/Chrome and Firefox/Opera
提问by bobince
After several hours of frustration I finally turned to the internet for the answer. Imagine this extremely simple piece of code:
经过几个小时的沮丧，我终于转向互联网寻求答案。想象一下这段极其简单的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AARRRRRRGH</title>
</head>
<body>
<table>
<tr>
<td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td>
</tr>
</table>
</body>
</html>
Now this seems pretty straightforward, create a table cell 100px wide and 100px high with a 6px border. As simple as it seems, it looks different in different browsers. In IE8 and google chrome the table cell is 112 x 112 px (so 100px inside and 6px outside). In Firefox 3 and opera the table is 112 x 100 px (so for some reason the border is added to the table width but not to the table height).
现在这看起来很简单，创建一个宽度为 100 像素、高度为 100 像素、边框为 6 像素的表格单元格。看起来很简单，但在不同的浏览器中看起来不一样。在 IE8 和谷歌浏览器中，表格单元格为 112 x 112 像素（因此内部为 100 像素，外部为 6 像素）。在 Firefox 3 和 opera 中，表格是 112 x 100 像素（因此出于某种原因，边框被添加到表格宽度而不是表格高度）。
Seriously, what gives? And how can I make this render the same on each browser (and no I can't use a div I need to use a table in this case).
说真的，什么给了？以及如何使这个渲染在每个浏览器上都相同（不，我不能使用 div，在这种情况下我需要使用表格）。
回答by bobince
Seriously, what gives?
说真的，什么给了？
Yeah... table cell heights and vertical border are really quite ill-defined in the CSS 2.1 specification. There's nothing that explains fully how they interact, and the standard block model doesn't quite cover it. The figure in section 17.6.1 where they demonstrate the definition of widths pointedly doesn't cover heights.
是的...表格单元格高度和垂直边框在 CSS 2.1 规范中确实定义不明确。没有什么可以完全解释它们如何交互，标准块模型也没有完全涵盖它。第 17.6.1 节中的图明确说明了宽度的定义，但并未涵盖高度。
FWIW I don't think Mozilla/Opera's interpretation makes any sense, but I can't say it's out-and-out wrong.
FWIW 我认为 Mozilla/Opera 的解释没有任何意义，但我不能说这是彻头彻尾的错误。
how can I make this render the same on each browser (and no I can't use a div I need to use a table in this case).
我怎样才能使这个在每个浏览器上呈现相同的效果（不，我不能使用 div，在这种情况下我需要使用表格）。
How about a div inside the table?
表格内的 div 怎么样？
<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
<div style="height: 100px;">...</div>
</td>
Now it's clear which measurement the ‘100px' refers to. This works for me.
现在很清楚“100px”指的是哪个度量。这对我有用。
回答by Scott Evernden
Have you tried other DOCTYPES? I have had good luck with:
您是否尝试过其他 DOCTYPES？我很幸运：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
回答by patmortech
I messed around with it a little, and there are a couple things, put together, that made them look the same for me in IE7 and Firefox 2. The two things I had to do were:
我把它弄乱了一点，有几件事放在一起，让我在 IE7 和 Firefox 2 中看起来一样。我必须做的两件事是：
a) add display:block; to the style for the table cell (made Firefox render the cell height in the same way as IE did);
a) 添加display:block；到表格单元格的样式（使 Firefox 以与 IE 相同的方式呈现单元格高度）；
b) added a non-breaking space to the cell (otherwise IE didn't display the borders).
b) 在单元格中添加了一个不间断空格（否则 IE 不显示边框）。
I don't have IE8 or Firefox 3 loaded, but you can give it a try. Not sure if there are any side effects to changing the display to block, but it does solve the issue.
我没有加载 IE8 或 Firefox 3，但您可以尝试一下。不确定将显示更改为阻止是否有任何副作用，但它确实解决了问题。
