html - 如何解决 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

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

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

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