Html 如何修复 Firefox 和 Chrome 之间的 CSS 填充问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18153717/
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
How do I fix CSS padding issues between Firefox & Chrome?
提问by Strings
Been at this for hours.
在这呆了几个小时。
I've been using this excellent UI toolkit: http://getuikit.comand so far it's been great.
我一直在使用这个出色的 UI 工具包：http: //getuikit.com，到目前为止它一直很棒。
The problem is styling my results between Chrome and Firefox I set the padding and I achieve this result in Chrome: http://i.imgur.com/dmV13Xw.pngAs you can see the text is nicely aligned with the start of the input field.
问题是在 Chrome 和 Firefox 之间设置我的结果样式我设置了填充并在 Chrome 中实现了这个结果：http: //i.imgur.com/dmV13Xw.png正如你所看到的，文本与输入的开头很好地对齐场地。
But in Firefox I get this: http://imgur.com/hZRyakg
但是在 Firefox 中我得到了这个：http: //imgur.com/hZRyakg
I've only just started really so it's frustrating to run into such intractabilities early on!
我才刚刚开始，所以很早就遇到这种棘手的问题令人沮丧！
The HTML markup for the result bit is:
结果位的 HTML 标记是：
<div class="results-sec`enter code here`tion">
<div id="results-container" class="uk-container uk-container-center uk-width-1-2">
<div class="result">
<a class="result_title" href="#">Bhutan travel advice</a>
<div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div>
<p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p>
</div>
</div>
And the CSS I'm applying to it:
以及我应用的 CSS：
#results-container {
margin-top: 9px;
margin-bottom: 6px;
padding-left: 40px;
padding-right: 160px;
}
I've tried inserting tons of snippets from around SO et al but nothing seems to work. Tried a seemingly infinite variation of CSS resets too, but the UI kit using integrates normalise.css anyway.
我试过从 SO 等人周围插入大量片段，但似乎没有任何效果。也尝试了看似无限的 CSS 重置变化，但使用的 UI 套件无论如何都集成了 normalise.css。
It's annoying because it seems like such a trivial amount of HTML/CSS.
这很烦人，因为它看起来像微不足道的 HTML/CSS。
I'm guessing it's something to do with moz/webkit CSS properties but I wouldn't know where to begin to rectify this issue.
我猜这与 moz/webkit CSS 属性有关，但我不知道从哪里开始纠正这个问题。
采纳答案by bhattamer
I think your bug is something other than padding/margin differences between FF and Chrome. Can you try to run your site through the w3c validator, http://validator.w3.org/
我认为您的错误不是 FF 和 Chrome 之间的填充/边距差异。您可以尝试通过 w3c 验证器运行您的网站吗，http://validator.w3.org/
Sometimes that can catch strange bugs caused by mix matched or unclosed elements.
有时这可以捕获由混合匹配或未关闭元素引起的奇怪错误。
Another thing I am noticing is that the results appear to be rendering in the same spot in both images relative to your logo. Perhaps the issue is with your input length or some surrounding element?
我注意到的另一件事是，相对于您的徽标，结果似乎在两个图像中的同一位置呈现。也许问题在于您的输入长度或一些周围的元素？
回答by Chad
What you need is called a CSS reset. http://meyerweb.com/eric/tools/css/reset/
您需要的称为 CSS 重置。 http://meyerweb.com/eric/tools/css/reset/
This isn't going to fix your issues (debugging is all you can do at this point) but in the future you should use a reset before you start and it'll prevent having cross browser issues (for the most part).
这不会解决您的问题（此时您只能进行调试），但将来您应该在开始之前使用重置，这样可以防止出现跨浏览器问题（在大多数情况下）。
回答by hemant singh
if you have no option left with u can use browser specifics
如果您别无选择，您可以使用浏览器的详细信息
this is for chrome
这是铬
@media screen and (-webkit-min-device-pixel-ratio:0) {
.example-box {
width: 76.4%;
}
}
this is for mozilla
这是给 Mozilla 的
@-moz-document url-prefix() {
.example-box {
width: 77.6%;}
}
回答by Matoeil
font size in % can override the padding settings . Playing with it can help the padding differences
以 % 为单位的字体大小可以覆盖填充设置。玩它可以帮助填充差异
