Google Chrome CSS盒子模型问题:盒子大小+表格+ 100%高度+边框 [英] Google Chrome CSS box model issue: box-sizing + table + 100% height + border
问题描述
看看这个小提琴(在Google Chrome中): http://jsfiddle.net/776uaj5b/1 /
< div style =background-color:blue;>
< table style =height:100px; border-spacing:0; border-collapse:collapse;>
< tr>
< td style =height:100%; width:100px;>
< div style =height:100%; background-color:red;>
BOX1
< / div>
< / td>
< td style =height:100%; width:100px;>
< div style =height:100%; background-color:red; border-width:10px; border-color:green; border-style:solid; box-sizing:border-box;>
BOX2
< / div>
< / td>
< / tr>
< / table>
< / div>
为什么BOX2被BOX1的边框数量压低?这是一个错误?
在Firefox甚至IE浏览器中,它看起来很正常。
问题是因为您在 div
中使用 box-sizing
。请记住,方块大小
是实验技术。我找到*的一个解决方案是使用 box-sizing:border-box; webkit-box-sizing:content-box;
并将它从div中的内联样式中移除(也请尝试避免内联样式):
div {
box-sizing:border-box;
-webkit-box-sizing:content-box;
}
参考 b
*与@ BoltClock的帮助:)
Take a look at this fiddle (in Google Chrome): http://jsfiddle.net/776uaj5b/1/
<div style="background-color: blue;">
<table style="height: 100px;border-spacing: 0;border-collapse: collapse;">
<tr>
<td style="height: 100%;width: 100px;">
<div style="height: 100%;background-color: red;">
BOX1
</div>
</td>
<td style="height: 100%;width: 100px;">
<div style="height: 100%;background-color: red;border-width: 10px;border-color:green;border-style:solid;box-sizing: border-box;">
BOX2
</div>
</td>
</tr>
</table>
</div>
Why is the BOX2 pushed down by the amount of border of BOX1? Is this a bug?
In Firefox and even IE it looks normal.
The problem is because you are using box-sizing
in the div
. Keep in mind that box-sizing
is experimental technology. One solution i find* is to use box-sizing: border-box;webkit-box-sizing: content-box;
and remove it from the inline style in div(also please try to avoid inline styles):
div {
box-sizing: border-box;
-webkit-box-sizing: content-box;
}
Reference
*with @BoltClock's help :)
这篇关于Google Chrome CSS盒子模型问题:盒子大小+表格+ 100%高度+边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!