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

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).

现在这看起来非常简单,创建一个100px宽的表格单元格和一个6px边框的100px高。看起来很简单,它在不同的浏览器中看起来不同。在IE8和谷歌浏览器中,表格单元格为112 x 112像素(内部为100像素,外部为6像素)。在Firefox 3和opera中,表格为112 x 100 px(因此由于某种原因,边框被添加到表格宽度而不是表格高度)。

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,在这种情况下我需要使用表)。

3 个解决方案

#1

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”指的是哪个测量值。这对我有用。

#2

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

#3

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,但你可以尝试一下。不确定将显示更改为阻止是否有任何副作用,但它确实解决了问题。

#1