chrome上的css填充问题答案

【问题标题】：css padding issue on chromechrome上的css填充问题
【发布时间】：2013-01-19 06:09:54
【问题描述】：

我使用 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 html>

【问题讨论】：

您是否在使用重置样式表..？
我猜这两个浏览器计算十进制像素宽度的方式不同。就此而言，当使用像素时，您正在处理您可以在屏幕上使用的最有限的单位，那么为什么您甚至需要一个小数呢？只需使用 25 或 26，然后无论如何它都应该是通用的。
使用display: block; float: left; 而不是display: inline-block;
@danp 我没有使用重置样式表。
我会完全避免小数像素，因为不同的浏览器对待它们的方式不同。一些向上，一些向下，还有一些截断。见ejohn.org/blog/sub-pixel-problems-in-css

标签： html css padding

【解决方案1】：

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

我的建议是：

1) 如果导航菜单的高度必须为 50 像素，请缩放里面的元素，以便为浏览器留出一点额外空间导致问题，或者：

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

【讨论】：