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

已经在这几个小时了。

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

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

但在 Firefox 中我得到了这个：https://i.stack.imgur.com/MKC4r.jpg https://i.stack.imgur.com/MKC4r.jpg

我才刚刚开始，所以很早就遇到如此棘手的问题真是令人沮丧！

结果位的 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 属性有关，但我不知道从哪里开始纠正这个问题。

我认为你的错误不是 FF 和 Chrome 之间的填充/边距差异。您可以尝试通过 w3c 验证器运行您的网站吗？http://validator.w3.org/ http://validator.w3.org/

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

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