CSS Firefox 和 Chrome 填充之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5370609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
difference between Firefox and Chrome padding
提问by amit
there is a difference in how firefox and chrome render the padding in css. what appears correct in chrome is extra padded in firefox. is there a way to solve?
firefox 和 chrome 在 css 中呈现填充的方式有所不同。在 chrome 中看起来正确的是在 Firefox 中额外填充。有没有办法解决？
.button {
font-family: helvetica, arial;
font-size: 64px;
width: 70px;
height: 45px;
font-weight: bold;
padding: 0px;
padding-top: 25px;
background-color: #000;
color: #fff;
text-align: center;
float: right;
margin: 7px 10px 0 0;
}
回答by superUntitled
If your .button is a buttonthis might be a mozilla inner focus thing... try this?
如果您的 .button 是 abutton这可能是 mozilla 内部焦点的事情...试试这个？
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
回答by Andrew Moore
Firefox and Chrome render paddingexactly the same way. Your problem is elsewhere.
Firefox 和 Chrome 以padding完全相同的方式呈现。你的问题在别处。
Are you using a reset CSS? If not, the default line-heightdeclaration might be interfering with the rendering of your button.
你在使用重置 CSS 吗？如果没有，默认line-height声明可能会干扰按钮的呈现。
For one, your heightis way smaller than your font-size. Since you don't have overflowspecified, your heightwill always be extended to at least font-size(or whatever your line-heightspecifies).
一方面，你的height比你的font-size. 由于您没有overflow指定，您height将始终扩展到至少font-size（或您line-height指定的任何内容）。
If your .buttonclass is actually a <button>element, also apply superUntitled fix.
如果你的.button类实际上是一个<button>元素，也应用superUntitled fix。
回答by Kirk Ross
The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:
焦点内部修复有效，但我还添加了负的顶部和底部边距以使其达到正确的高度。例如：
*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}
I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.
我曾经喜欢 Firefox，但它已经变得臃肿不堪，几年前从我的圣诞清单上消失了。
回答by Joel Glovier
You are actually correct - there is a bug in Firefox where the button element's line height cannot be changed with the CSS line-height property.
您实际上是正确的 - Firefox 中存在一个错误，即无法使用 CSS line-height 属性更改按钮元素的行高。
See this link for details: http://www.cssnewbie.com/input-button-line-height-bug/
有关详细信息，请参阅此链接：http: //www.cssnewbie.com/input-button-line-height-bug/
The solution is to use padding instead of line-height.
解决方案是使用填充而不是行高。
回答by website programmer
The way that worked for me was to set the height of the object so that firefox, chrome and opera render it the same way, and remove all padding.
对我有用的方法是设置对象的高度，以便 firefox、chrome 和 opera 以相同的方式渲染它，并删除所有填充。
.footertext6{
float: left;
padding-top:10px;
width: 160px;
height:102px; */setting height here*/
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
border-top-right-radius: 50px;
}
