Question

我使用css设计了一个导航列表。以下是我的代码

ul#mainnavigation li a {
    font: 14px/20px 'Open Sans', Open Sans, Helvetica, Arial, sans-serif;
    position:relative;
    font-weight:600;
    color:#686868;
    margin:0;
    padding:0 19.7px;
    height:50px;
    line-height:50px;
    display:inline-block;
    -webkit-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
    -moz-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
    -o-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
    transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
    z-index:100;
}

我遇到的问题是在firefox中完美运行但在chrome中最后一个导航元素已经消失了。

firefox padding:0 25.7px;中的

给出了正确的结果

chrome padding: 0 26.5px;中的

会给出正确的结果

如何确保填充在两个浏览器上都能正常工作？

注意：我已将doctype定义为<!DOCTYPE html>

Answer 1

正如您所发现的，不同的浏览器通常会为相同的元素呈现略微不同的像素大小 - 这通常是因为字体大小以及浏览器如何缩放字体，但可能有多种原因。

我的建议是：

1）如果导航菜单必须是50px高，请缩放内部元素，为浏览器留下一些额外的空间，或者：

2）您还可以在菜单上删除硬编码的50px高度，并让它自动缩放以适合其元素。如果菜单中的任何内容浮动，删除菜单容器上的“height”属性并添加“overflow：hidden;” CSS的属性应该使菜单扩展到其中所有内容的高度。

chrome上的css填充问题

1 个答案: