跨浏览器的背景图像位置存在细微差异

Posted 2023-03-06

【中文标题】跨浏览器的背景图像位置存在细微差异

【英文标题】：Minor differences in background-image positions across browsers

【发布时间】：2013-10-15 07:33:50

【问题描述】：

在http://onpole.org/roland/，我使用背景图像来装饰页面。 我自己使用的是 Mozilla Firefox，所以我在创建 CSS 时考虑了那个浏览器。

但是，如果我在不同的浏览器（Chrome、Safari、还没有尝试过 IE）中打开同一个网站，我会看到细微的差异，这会破坏布局。

例子：

（这个在 Firefox 中实际上是错误的）

在页面的顶部，有一个绘图，其中一条白线出来并向下延伸，进入网站的下一部分。 在 Firefox 中，下一部分出现错误，

但在 Safari 和 Chrome 中，这条线是正确的！

我会发布更多示例，但显然我的声誉太低，无法发布超过 2 个链接。有具体的。

还有一部分是有箭头出线的。这在 Firefox 中运行良好，但在 Safari 和 Chrome 中都有错误。

所以第一个错误在 Firefox 中不正确，但在 Safari 和 Chrome 中可以正常工作。 第二个错误正好相反。

我在此处发布此内容是因为我需要有关如何解决这些问题的建议。 我应该在移动第 1 行像素的地方制作特定于浏览器的 CSS 吗？ 还是有其他方法？或者你们有谁知道为什么会出现这些差异？

【问题讨论】：

像这样分割图像然后尝试将它们重新对齐是灾难的秘诀，最好避免。有一些方法可以在保持线条图像完整的同时使这些背景颜色正常工作，因此我建议您采用这种方法。

我想我明白你的意思了。我不能把图像切开，这样它们当然会对齐。但是网站中有一部分可以在高度上增长/缩小，所以白线必须是可重复的。我认为，这仍然是一个问题。对吗？

我想这是个问题。我要么重新考虑你期望发生的事情，要么尝试使用 background-size 属性。

【参考方案1】：

只是一个建议，但为什么不创建一个单独的样式表呢？当我帮助重新设计公司的网站时，我和我的主管发现我们的样式表在 Chrome 中正确呈现，但在 Firefox 中却没有。最终，我们创建了一个样式表来修复这些区域。只有在使用的浏览器是 Firefox 时才会启动。

使用简单的php 命令（并假设您的Gecko 样式表将存储在您网站主模板目录中名为CSS 的文件夹中），您可以通过以下方法检测浏览器是否正在使用的是 Firefox，它将强制 Gecko 样式表在页面加载之前启动：

// firefox
if ($this['useragent']->browser() == 'firefox') 

  // add gecko stylesheet
  $this['asset']->addFile('css', 'css:gecko.css');

重要提示：在编写仅适用于基于 Gecko 的浏览器的样式表时，表单必须按如下方式编写：

@-moz-document domain(YOUR-DOMAIN.com) 

  /* ADD YOUR CSS HERE */

只有 之间的代码才能在 Firefox 中读取。最棒的是，如果您想针对您网站上的特定子域，您可以在同一个样式表上为该子域添加声明。

@-moz-document domain(YOUR-DOMAIN.com) 

  /* ADD YOUR CSS HERE */



@-moz-document domain(SUBDOMAIN.YOUR-DOMAIN.com) 

  /* ADD YOUR CSS HERE */

只要记住将你的规则放在大括号 内就可以了。

【讨论】：

感谢您的回答，是的，这会起作用。但我发现差异不是恒定的。例如;我刚刚修复了 FireFox 中的一个错误，然后稍微更改了浏览器的大小，错误又出现了！所以即使我制作单独的样式表，问题仍然存在..