Firefox：盒子模型的错误解释？

我刚刚发现Firefox的奇怪行为。Firefox：盒子模型的错误解释？

如果我有一个100像素高度的表格单元格，并添加20px的填充 - 它的总高度应该变成140px。

所有浏览器中正确行为，火狐8.0忽略填充：

http://jsfiddle.net/8wDde/

任何人都知道一个修复？

来源

2011-12-03 ptriek

在Firebug中，它计算填充量，但计算出的高度为60px。 –

也许与Firefox的默认样式有些问题。重置样式不会工作太...（http://meyerweb.com/eric/tools/css/reset/） – rekire

您的意思是一个CSS重置？相同的结果... http://jsfiddle.net/8wDde/3/ – ptriek

这似乎是最好的跨浏览器的解决方案可能是设置表行等的整个高度到该单元的高度和填充：

tr {height: 140px;}

参见：http://jsfiddle.net/8wDde/19/

来源

2011-12-03 21:02:10 ScottS

这是一个奇怪的行为。添加display:block;可以解决问题。在FF8.01见测试：

http://jsfiddle.net/8wDde/1/

但我也不知道为什么？

我搜索了https://developer.mozilla.org/en-US/search?q=table+padding，但没有找到任何东西。也许你也可以尝试在那里搜索。

UPDATE： http://jsfiddle.net/8wDde/7/

添加overflow:hidden避免td变线。

来源

2011-12-03 19:20:23 Giberno

看起来'td'标签没有设置'display：block'。但它是一个奇怪的块元素。 – rekire

+1对于本发明 - 然而 - 它只适用于具有一个单元格的表格： -/http://jsfiddle.net/8wDde/4/ – ptriek

@rekire表格单元格的默认'display'值是'table-cell' 。 –

我在Google上找不到这方面的任何信息，因此修复Firefox的一种方法就是使用CSS hack。

@-moz-document url-prefix() { 
td{ 
    height:140px !important; 
} 
}

显然，如果高度为200px，那么你会改变，要240px占失踪20px顶部和底部上。

针对所有Firefox版本，我不确定是否有FF8特定的CSS黑客入侵。

你可以看到这个演示这里：http://jsfiddle.net/charlescarver/8wDde/2/

编辑：我喜欢Giberno的回答更

来源

2011-12-03 19:21:13 Charlie

这是一个肮脏的把戏;-) – rekire

确实很肮脏，也许是一个最终的度假胜地......但是，谢谢！ – ptriek

如果一切都失败，玩弄脏;） – Charlie

Diagram of row, cell box and padding effect

这是一对夫妇的意见，我对another question提出，希望一点点更清晰的更详细的描述。请注意，Opera具有与Firefox相同的行为。

在上图中，总单元区域是暗框，文本My Text是td的内容，正是它定义了单元格框（C）。

现在，CSS 2。1个规范说：

一个“表行”元素框的高度计算，一旦用户代理有可用的行中的所有单元格：它是最大的行的计算“高度”的，行中每个单元格的计算“高度”以及单元格所需的最小高度（MIN）。 “高度” “表格行”的“自动”值表示用于布局的行高度是MIN。 MIN取决于单元格高度和单元格对齐方式（很多类似于线框高度的计算）。 ...

在CSS 2.1中，单元格框的高度是所需的最小高度。表格单元的“高度”属性可以影响该行的高度（请参阅上文），但不会增加单元格框的高度。

所以td { height:100px; }影响行高（R）（它将至少100px高），但不会影响单元格框（C）。

另一方面，td { padding:20px; }适用于单元格框（C），所以如果（C）+顶部填充+底部填充的高度小于100像素，则行高不会受到影响，仍然为100px。

如果（C）+顶部填充+底部填充大于100像素，则行高将展开以适应（C）+顶部填充+底部填充的全部高度。

然后td { background-color:blue }适用于全行高（R）和单元宽度。

您可以在http://jsfiddle.net/Ez7xz/

在行动中看到这最后的混淆因素是在Firebug的td的计算高度的价值。这里似乎正在发生的是，假定高度是content-box框尺寸的结果，并报告R的值减去顶部和底部填充。虽然这看起来很奇怪，但它能合理报告的其他价值并不明显。

来源

2011-12-05 01:38:24 Alohci

Firefox：盒子模型的错误解释？

回答

相关问题