3

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

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

例子：

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

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

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

看到这个

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

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

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

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

4

1 回答 1

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 */

}

只要记住将您的规则放在大{ }括号内，就可以了。

于 2013-10-08T23:48:56.877 回答