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>

现在这看起来很简单，创建一个 100 像素宽和 100 像素高的表格单元格，边框为 6 像素。尽管看起来很简单，但它在不同的浏览器中看起来不同。在 IE8 和 google chrome 中，表格单元格为 112 x 112 像素（因此内部为 100 像素，外部为 6 像素）。在 Firefox 3 和 Opera 中，表格是 112 x 100 像素（因此由于某种原因，边框被添加到表格宽度而不是表格高度）。

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

4

3 回答 3

7

说真的，什么给了？

是的...表格单元格高度和垂直边框在 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”指的是哪个测量值。这对我有用。

于 2009-03-31T18:31:51.617 回答
0

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
于 2009-03-31T15:00:54.900 回答
0

我把它弄乱了一点，有几件事放在一起，使它们在 IE7 和 Firefox 2 中对我来说看起来一样。我必须做的两件事是：

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

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

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

于 2009-03-31T16:15:53.987 回答