Firefox和Chrome中背景图像的结果不同

Question

我有这个网站：

http://gazien.com/app.php/hello/javier

如您所见，导航栏的分隔符在Chrome和Firefox中显示不同。我喜欢Firefox的可视化。如何在Chrome中获得相同内容？

Answer 1

从nav删除边框图像。由于此属性不影响firefox中的样式。

header nav {
clear: left;
list-style: none;
text-align: center;
/*
border-image: url("/bundles/placasfrontend/images/linea.jpg");
-webkit-border-image: url("/bundles/placasfrontend/images/linea.jpg") 30 30 round;
-o-border-image: url("/bundles/placasfrontend/images/linea.jpg") 30 30 round;
border-image: url("/bundles/placasfrontend/images/linea.jpg") 30 30 round;*/
}

Answer 2

您在CSS中使用了前缀，这使得它在Chrome和Firefox上的渲染方式不同。要使Chrome看起来像Firefox，请删除cf7228f.css第90和92行的边框图像：

header nav {
  clear: left;
  list-style: none;
  text-align: center;
  /* border-image: url("/bundles/placasfrontend/images/linea.jpg"); */
  /* -webkit-border-image: url("/bundles/placasfrontend/images/linea.jpg") 30 30 round; */
  /* -o-border-image: url("/bundles/placasfrontend/images/linea.jpg") 30 30 round; */
  /* border-image: url("/bundles/placasfrontend/images/linea.jpg") 30 30 round; */
}