Firefox 忽略填充答案

【问题标题】：Firefox ignoring paddingFirefox 忽略填充
【发布时间】：2011-02-13 15:23:18
【问题描述】：

我有这个 CSS 代码：

   #tweet-container{
width: 290px; 
height: 272px; 
border: 1px solid #CCC; 
color: #CCC; 
font-size: 28px; 
text-align: center;
letter-spacing: -2px; 
min-height: 10px; 
display: table-cell; 
vertical-align: middle; 
padding: 15px;
}

但 Firefox 似乎无法识别顶部和底部填充。 Safari 和 Chrome 都正常显示，甚至在我添加 padding-top 的 Firebug 中：它不起作用。它就像它不是一个有效的陈述或其他东西。我有什么遗漏吗？

【问题讨论】：

是否显示：table-cell；尊重边距？
似乎确实如此，因为左右填充正常工作。
可能是它周围的内容导致了问题......我们得到了一个实时版本的链接（或使用pastebin.me）我在Firefox的一个页面上单独尝试了你的代码，然后填充工作正常，因此很可能是其他代码导致了问题。
好的，这是 pastebin.me：pastebin.me/7dfade0a9599db66e7d3aaba1c24dece

标签： css layout padding

【解决方案1】：

嗯，这有点有趣。您已将宽度设置为 272 像素，但实际上显示为 270 像素。您已将高度设置为 290 像素，加上 30 像素的内边距，实际显示的高度应该是 320 像素，但实际上是 318 像素。

玩了一点，取出显示：table-cell；似乎解决了这个问题。尽管填充在某些原因上分布不均，但它们都出现在底部。将文本放在 p 标签中，并给出 15px 的上边距虽然我认为已经完成了这项工作。

【讨论】：

我使用 display:table-cell 的唯一真正原因是能够垂直对齐具有未知高度的文本。出于这个原因，我想尝试将其保留在那里，但它似乎是麻烦制造者......可能必须使用 javascript 解决方案。
是的，我的解决方案是 5 分钟破解。不过，垂直对齐的东西总是很痛苦。至少你离弄清楚它更近了！

【解决方案2】：

您尝试添加padding:15px!important; 吗？

【讨论】：

我没有尝试过，但这并不能解决问题......不过，谢谢。