使用FireFox进行CSS计算的额外+ 4px

Question

我的显示器中有很多1px - 4px错误我通过手动重置CSS来修复（即设置默认设置为0以在浏览器之间进行标准化）。

我的猜测是，我有一个非标准化的参数，或者我不完全理解盒子模型。

计算

名称框大小（#hold_name） - 10px（填充顶部和底部）+ 10px（字体大小）= 20px。

图像大小（#hold_picture） - 20px（定义为高度参数）

菜单栏（#Aa） - 40px（定义为高度参数）

这些是我想要的尺寸，但是盒子挂得太低......

这个额外长度来自哪里？

我在小提琴中手动规范化p，div和body标签，我认为这样可以给我一个0的基数来进行计算。

我在Fire Fox工作

Answer 1

我改变了你的小提琴中的填充值，并在框中排列了图像。

#hold_name {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    display: inline;
    float: right;
    font-size: 10px;
    **padding: 2px;**
    position: relative;
    top: 20px;
}

我假设你想要盒子和图像向上移动4个像素？为什么要使用

标签？我通常使用div并将它们与CSS对齐或使用div与表格并与CSS对齐。