Question

经过几个小时的挫折，我终于转向互联网寻求答案。想象一下这段非常简单的代码：

<!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边框的100px高。看起来很简单，它在不同的浏览器中看起来不同。在IE8和谷歌浏览器中，表格单元格为112 x 112像素（内部为100像素，外部为6像素）。在Firefox 3和opera中，表格为112 x 100 px（因此，由于某种原因，边框会添加到表格宽度，但不会添加到表格高度）。

说真的，给出了什么？如何在每个浏览器上使这个渲染相同（并且我不能使用div，在这种情况下我需要使用表格）。

Answer 1

说真的，给出了什么？

是的......表格单元格高度和垂直边框在CSS 2.1规范中确实非常不明确。没有什么可以完全解释它们如何相互作用，标准块模型并没有完全覆盖它。第17.6.1节中的数字显示了宽度的定义，并未涵盖高度。

FWIW我不认为Mozilla / Opera的解释有任何意义，但我不能说这是彻头彻尾的错误。

如何在每个浏览器上使这个渲染相同（并且在这种情况下我不能使用div我需要使用表格。）

桌子里的div怎么样？

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

现在很清楚“100px”指的是哪个测量值。这对我有用。

Answer 2

您是否尝试过其他DOCTYPES？我好运：

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

Answer 3

我搞砸了一下，有一些东西放在一起，这使得它们在IE7和Firefox 2中对我来说看起来都一样。我必须做的两件事是：

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

b）为单元格添加了一个不间断的空格（否则IE没有显示边框）。

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

表格单元格和边框在IE / Chrome和Firefox / Opera中的显示方式不同

3 个答案: