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

MDN箱子大小

*与@ 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;
}

fiddle

Reference

MDN box-sizing

*with @BoltClock's help :)

这篇关于Google Chrome CSS盒子模型问题：盒子大小+表格+ 100％高度+边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！