{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 戒情不戒烟 的问题《CSS property Box-Sizing has no effect on the Box M》','https://www.manongdao.com/q-403634.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
There was this question posted and it got me thinking.
table cell fixed height and border issue in firefox
So I did as follows.
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>
With the following 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;
}
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?
Can also somebody please create the tags for "box-sizing" and "padding-box"
This is a known issue with Firefox's implementation of
box-sizing. The MDN page forbox-sizingsays: