在IE/Chrome和Firefox/Opera中，表格单元格和边框显示不同。

Question

在IE/Chrome和Firefox/Opera中，表格单元格和边框显示不同。

6

在经历几个小时的挫败后，我最终向互联网寻求答案。想象一下这段极其简单的代码：

<!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>

现在看起来很简单，创建一个宽度和高度都为100px，带有6px边框的表格单元格。尽管看起来很简单，但在不同的浏览器中呈现效果不同。在IE8和Google Chrome中，表格单元格大小为112 x 112像素（内部为100像素，外部为6像素）。在Firefox 3和Opera中，表格大小为112 x 100像素（某种原因导致边框增加了表格宽度但未增加表格高度）。

真的很奇怪，我该怎么做才能使每个浏览器呈现相同的效果呢？（不是使用div，而是需要在这种情况下使用表格）

- user85142

3个回答

0

我稍微调整了一下，有几个组合的方法让IE7和Firefox 2看起来一样。我所做的两件事情是：

a) 在表格单元格的样式中添加display:block（使Firefox以与IE相同的方式呈现单元格高度）；

b) 在单元格中添加一个不间断空格（否则IE不会显示边框）。

我没有加载IE8或Firefox 3，但你可以试试。不确定将显示更改为块是否有任何副作用，但它确实解决了问题。

- patmortech

“display: block” 会使得在IE以外的浏览器中，该单元格不再被视为表格单元格，导致其他单元格也跟着布局崩溃。 - bobince

你有实际验证过吗，还是只是假设？我在Firefox 2中查看它，它看起来就像任何其他的表格单元格。 - patmortech

在IE中，只有空表格单元格才需要使用nbsp（否则它不是单元格）。 - borrel

0

你尝试过其他的 DOCTYPE 吗？我曾经用过以下这些，效果不错：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- Scott Evernden

我刚尝试替换上面代码中的文档类型...但是没有成功。 - user85142

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

严肃地说，怎么回事？

是的...在CSS 2.1规范中，表格单元格高度和垂直边框确实很难定义。没有任何内容完全解释它们如何相互作用，并且标准块模型并不能完全覆盖它。在第17.6.1节中演示宽度定义的图中，明确指出没有涉及高度。

就我而言，我认为Mozilla/Opera的解释毫无意义，但我不能说它完全错误。

那么，如何使每个浏览器呈现相同（不，我不能使用div，在这种情况下我需要使用表格）？

在表格中放置一个div如何？

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
    <div style="height: 100px;">...</div>
</td>

现在很清楚‘100px’是指哪个度量单位了。这对我很有效。