[英]Table cell and border displaying differently in IE/Chrome and Firefox/Opera
经过几个小时的挫折,我终于转向互联网寻求答案。 想象一下这段极其简单的代码:
<!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 和操作中,表格为 112 x 100 像素(因此由于某种原因,边框被添加到表格宽度而不是表格高度)。
说真的,什么给了? 以及如何使每个浏览器上的渲染相同(在这种情况下,我不能使用 div 我需要使用表格)。
说真的,什么给了?
是的...表格单元格高度和垂直边框在 CSS 2.1 规范中的定义非常不明确。 没有什么可以完全解释它们是如何交互的,标准块 model 并没有完全涵盖它。 第 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”指的是哪个测量值。 这对我有用。
您是否尝试过其他 DOCTYPES? 我很幸运:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
我把它弄乱了一点,有几件事放在一起,使它们在 IE7 和 Firefox 2 中对我来说看起来一样。我必须做的两件事是:
a) 添加display:block
; 表格单元格的样式(使 Firefox 以与 IE 相同的方式呈现单元格高度);
b) 为单元格添加了一个不间断的空格(否则 IE 不显示边框)。
我没有加载 IE8 或 Firefox 3,但你可以试一试。 不确定将显示更改为阻止是否有任何副作用,但它确实解决了问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.