CSS属性Box-Sizing对Box模型没有影响 [英] CSS property Box-Sizing has no effect on the Box Model
问题描述
有这个问题，让我想起来。
There was this question posted and it got me thinking.
table cell fixed height and border issue in firefox
所以我做了如下。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Template</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<table id="first" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
<table id="second" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
<table id="third" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
</body>
</html>
使用以下CSS：
* {
padding: 0;
margin: 0;
font: 15px arial, sans-serif;
line-height: 1;
}
table {
border-collapse: collapse;
border-spacing: 0;
float: left;
margin-left: 5px;
}
table#first tbody tr td {
height: 35px;
border-bottom: 5px solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
table#second tbody tr td {
height: 35px;
border-bottom: 5px solid #000;
box-sizing: content-box;
-moz-box-sizing: content-box;
}
table#third tbody tr td {
height: 35px;
border-bottom: 5px solid #000;
box-sizing: padding-box;
-moz-box-sizing: padding-box;
}
问题是，无论box-sizing属性值为 border-box （点击图片），内容框（点击图片）和 padding -box （点击图片），在Firefox 6.0.2中，在Firebug 1.8.2下，布局选项卡以及计算的高度显示所有< td> 为32像素，边框为3px。
The problem is that regardless of the box-sizing property with values of border-box(click for pic), content-box(click for pic) and padding-box(click for pic), in Firefox 6.0.2, under Firebug 1.8.2, the layout tab as well as the computed height shows the height of all <td> to be 32px with a 3px border.
任何东西出错，或者我缺少一些简单的东西，或者我的盒子模型的概念是错误的？
Either something is wrong, or I am missing something simple or my concept of the box-model is wrong?
也可以有人为box-sizing和padding-box创建标签
Can also somebody please create the tags for "box-sizing" and "padding-box"
推荐答案
这是Firefox的 box-sizing 实现的一个已知问题。 盒尺寸的MDN页面说：
This is a known issue with Firefox's implementation of box-sizing. The MDN page for box-sizing says:
注意
请参阅错误243412 及其依赖项：
-
-moz-box-sizing不适用于表格单元格
-moz-box-sizingdoesn't apply to table cells
这篇关于CSS属性Box-Sizing对Box模型没有影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![padding -box](\"http://i55.tinypic.com/2evc9qx.jpg\"){kind=link}