chrome/firefox 之间的 CSS 背景位置变化

Question

我正在为期末元素创建一个网站，我遇到了导航图像背景位置在浏览器(主要是 Firefox)之间变化的问题。

这可以通过单击我上传到我学院服务器的页面链接来证明:http://cis.scc.losrios.edu/~cisw320q_stu007/sbc/index.html .交替使用的视口(viewport)(Chrome/Firefox)将显示我所说的定位差异。 Chrome 会正确显示背景位置(“Business BLDG”位于学校标志的正下方)。

有没有我可以使用的 CSS 技巧来缓解这个问题，以便背景定位在所有视口(viewport)之间是静态的？

主要导航代码:

div#nav {
width: 1024px;
border-bottom: 3px solid #fff;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color: #660000;
background: url(http://i60.tinypic.com/i6gn5x.jpg);
background-position-y: 53.75%;
color: #fff;
}

Answer 1

您可以使用此代码段专门针对 Firefox 并为其设置正确的背景位置。

@-moz-document url-prefix() { 
    /* Your styling for Firefox goes here */
    div#nav{
       /* background-position: firefox-value */
    }
}