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

Posted 2023-03-05

【中文标题】如何修复 Firefox 和 Chrome 之间的 CSS 填充问题？

【英文标题】：How do I fix CSS padding issues between Firefox & Chrome?

【发布时间】：2013-08-11 19:12:45

【问题描述】：

在这里待了好几个小时。

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

这很烦人，因为 HTML/CSS 看起来如此微不足道。

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

【问题讨论】：

可能是因为搜索输入字段有填充或其他东西，尝试在搜索输入上填充：0。这可能是一个简单的问题，可以链接我你的网站，以便我可以调试它或在jsfiddle.net上做一个例子@

使用相应浏览器的开发工具并查看元素的盒子模型——看看是否有不同的计算填充/边距

在搜索输入中添加/删除填充只会影响搜索输入文本。

Eevee，Chrome 的盒子模型似乎为左右边距设置了 320px。 Firefox 在 0...

显式设置左右边距，两个浏览器的行为应该一样。

【参考方案1】：

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

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

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

【讨论】：

之前遗留了一些奇怪的 div，导致宽度发生变化。一个奇怪的。

【参考方案2】：

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

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

【讨论】：

他使用的UI工具包自带重置css。

好吧，抱歉没有意识到它有一个内置的。他们对代码的解释如此不同似乎很奇怪。我几乎觉得它必须是由谷歌而不是由 mozilla 处理的代码中的某种错误（我以前发生过这种情况）。

【参考方案3】：

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

这是为 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%;
 

【参考方案4】：

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