3

一直在这几个小时。

我一直在使用这个出色的 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 et al 周围插入大量片段，但似乎没有任何效果。也尝试了看似无限的 CSS 重置变化，但使用的 UI 工具包仍然集成了 normalise.css。

这很烦人，因为它看起来像这样微不足道的 HTML/CSS。

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

4

4 回答 4

3

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

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

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

于 2013-08-09T19:51:04.113 回答
3

您需要的称为 CSS 重置。 http://meyerweb.com/eric/tools/css/reset/

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

于 2013-08-09T18:59:23.073 回答
1

如果您别无选择，您可以使用浏览器细节

这是铬的

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

这是给Mozilla的

@-moz-document url-prefix() {
 .example-box {
   width: 77.6%;}
 }
于 2018-04-12T06:17:37.810 回答
0

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

于 2017-07-20T12:29:04.250 回答