经过几个小时的挫折,我终于转向互联网寻求答案.想象一下这段非常简单的代码:
<!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,在这种情况下我需要使用表).
说真的,给出了什么？
是的......表格单元格高度和垂直边框在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"指的是哪个测量值.这适合我.
| 归档时间： |
|
| 查看次数： |
36846 次 |
| 最近记录： |