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

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

这是针对chrome

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

这是针对mozilla的

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

如何解决Firefox和Firefox之间的CSS填充问题;铬？

4 个答案: