Question

我正在开发firefox，我只想查看当前状态在Chrome中的外观。我看到了一个小问题。之后我在Edge和IE上检查了它，问题出现在所有浏览器中，除了firefox。

为了显示我的问题，这是一张图片：

As you can see there is no problem. A navigation bar positioned to the bottom of an image

但在其他浏览器中，它们看起来像这样：

You can see 2 or 3px difference. I don't know why. I'm using only two CSS file. The bootstrap-grid system and mine SCSS file.

我在Inspectors中检查了它们，FF说它的高度是42px，而Chrome则说是40。

SCSS：

nav{
top: 254px;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}
nav a{

text-decoration: none;
text-transform: uppercase;
font-family: $nav-font;
font-size: 25px;
color:#126ADE;
letter-spacing: 0.8px;
margin-left: 20px;
padding: 5px;

}
nav a:first-child{ margin-left: 0px;}
nav a:hover{ background: white;}

Answer 1

在这种情况下，我尝试为Firefox和Chrome使用单独的CSS规则：

两种浏览器共有的规则：

nav {
position: absolute;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}

仅适用于Firefox：

@-moz-document url-prefix() {
nav{
top: 252px;/*making the height same as chrome*/
}
}

仅适用于Chrome：

@media and (-webkit-min-device-pixel-ratio:0) {
nav{
top: 254px;
}
}

希望有所帮助!!

我的CSS在除Firefox之外的所有浏览器中显示不同

1 个答案: