如何修复Firefox和Chrome之间的CSS填充问题？

Question

在这几个小时。

我一直在使用这个优秀的UI工具包： http ： //getuikit.com ，到目前为止它一直很棒。

问题是在Chrome和Firefox之间设置我的结果样式我设置了填充，我在Chrome中实现了这个结果： http ： //i.imgur.com/dmV13Xw.png正如您所看到的那样，文本很好地与输入的开头对齐领域。

但是在Firefox中我得到了这个： http ： //imgur.com/hZRyakg

我刚开始真的开始这么难以在早期遇到这种顽固性！

结果位的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>

我正在申请的CSS：

    #results-container {
      margin-top: 9px;
      margin-bottom: 6px;
      padding-left: 40px;
      padding-right: 160px;
}

我试过从SO等人那里插入大量的片段，但似乎没有任何效果。 尝试了CSS重置看似无限的变化，但无论如何使用的UI工具包集成了normalise.css。

这很烦人，因为它似乎是如此微不足道的HTML / CSS。

我猜这与moz / webkit CSS属性有关，但我不知道从哪里开始纠正这个问题。

Answer 1

你需要的是一个CSS重置。 http://meyerweb.com/eric/tools/css/reset/

这不会解决您的问题（此时您可以进行调试），但将来您应该在启动之前使用重置，这样可以防止出现跨浏览器问题（大多数情况下）。

Answer 2

我认为您的错误不同于FF和Chrome之间的填充/边距差异。 你能尝试通过w3c验证器运行你的网站， http：//validator.w3.org/

有时，这可以捕捉由混合匹配或未闭合元素引起的奇怪错误。

我注意到的另一件事是，结果似乎在两个图像中相对于您的徽标呈现在相同位置。 也许问题在于您的输入长度或某些周围元素？

Answer 3

以％为单位的字体大小可以覆盖填充设置。 玩它可以帮助填充差异

Answer 4

如果你没有选择，你可以使用浏览器细节

这是为铬

@media screen and (-webkit-min-device-pixel-ratio:0) {
.example-box {
  width: 76.4%;
 }
}

这是为了mozilla

@-moz-document url-prefix() {
 .example-box {
   width: 77.6%;}
 }