正如你在这里看到的http://goo.gl/mCY8KW (抱歉,无法在 JSfiddle 上重现)我的菜单项下方的小箭头在 Firefox 上高 1px(在 Chrome 和 Safari 上工作正常)
知道问题是什么以及如何解决吗?玩 Firebug 我可以通过修改行高来修复它:
body {
color: #1a1a1a;
font-family: 'Open Sans';
font-size: 16px;
font-weight: 300;
line-height: 1.6;
}
...但如果我这样做,我会搞砸整个页面的行高,这不是我想做的事情。我还尝试修改以在 .menu-container
中应用 1.4 的行高,但如果我这样做,它在 firefox 上看起来不错,但在 Safari 和 Chrome 中就不行了。
非常感谢您的帮助,
SAFARI 看起来不错:
Firefox 问题:
.menu-container {
float: right;
margin-top: 20px;
margin-right: 30px;
margin-left: auto;
width: auto;
}
nav {
float: right;
margin: 20px auto;
width: 100%;
}
nav ul {
margin-right: -4px;
margin-left: 5px;
text-align: right;
}
nav ul li {
display: inline-block;
margin-right: -4px;
margin-left: 5px;
vertical-align: top;
}
nav a {
padding: 4px 8px;
text-decoration: none;
color: rgba(255,255,255,1) !important ;
background: rgba(0,0,0,0.25);
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 14px;
font-weight: 400;
transition: all 0.5s ease;
}
nav a:hover {
border-top: 1px solid #234692;
border-bottom: none;
background: rgba(0,0,0,0.28) !important ;
}
nav ul li ul {
position: absolute;
display: block;
margin-top: 5px;
background: none;
padding-top: 5px
}
nav ul li ul li {
display: block;
float: none;
margin: 0;
padding: 0
}
nav ul li ul li a {
display: block;
text-align: left;
color: rgba(255,255,255,0.9) !important ;
text-shadow: 0 1px rgba(0,0,0,0.33) !important ;
padding: 10px
}
nav ul li ul li a:hover {
background: rgba(20,150,220,0.5) !important ;
color: white;
text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
display: block;
}
.hover span {
color: rgba(255,255,255,0.9);
background: rgba(20,150,220,0.5);
border-radius: 5px;
position: absolute;
display: block;
margin: 5px 0 0 -57px;
padding: 10px;
font-size: 13px;
font-weight: 300;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
cursor: default;
}
/*li.selected a{
border-bottom: 1px solid rgba(16,65,145,0.9);
}*/
.selected {
position: relative;
}
.menu-item-border {
border-top: 1px solid #234692;
}
li.selected a:after {
top: 25px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: rgba(0,0,0,0.25);
border-width: 10px;
margin-left: -10px;
}
最佳答案
这很可能是文本呈现方式的差异。在不同的浏览器中,文本总是看起来略有不同,大小也略有不同。操作系统、用户系统设置和浏览器设置也会影响文本呈现。
尝试为元素使用特定的高度,而不是围绕文本大小进行填充,这样元素的高度就不会依赖于文本 block 的高度。
例子:
padding: 0 8px;
height: 30px;
line-height: 30px;
关于html - Firefox 渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24740312/