padding 的方式
由于 Firefox 的 border 问题 , 设定 height 是不可能保证高度一致的 , 除非判断再去判断操作系统类型 , 但那样做太麻烦了 , 而且说不定 mobile 版又不一样
那是否可以不通过设置 height 来控制 ? 在目前的大搜索首页也是 standards 模式 , 它是采用 padding 的方式来实现 28px 的高度的
<input type= "text" style= "font: 16px arial; padding:3px" />
这种写法的测试结果是
浏览器
height + padding-top + padding-bottom + border-top-width + border-bottom-width
IE6(xp)
18 + 3 + 3 + 2 + 2 = 28
IE7(xp)
18 + 3 + 3 + 2 + 2 = 28
IE8(win7)
18 + 3 + 3 + 2 + 2 = 28
Firefox 3.5(xp)
19 + 3 + 3 + 2 + 2 = 29
Firefox 3.5(win7)
19 + 3 + 3 + 1 + 1 = 27
Firefox 3.5(mac 10.6.2)
20 + 3 + 3 + 3 + 3 = 32
Firefox 3.5(ubuntu 10.04)
19 + 3 + 3 + 3 + 3 = 31
Chrome 5(xp)
19 + 3 + 3 + 2 + 2 = 29
Chrome 5(win7)
19 + 3 + 3 + 2 + 2 = 29
Chrome 5(mac 10.6.2)
18 + 3 + 3 + 2 + 2 = 28
Chrome 5(ubuntu 10.04)
19 + 3 + 3 + 2 + 2 = 29
在不设定输入框高度的情况下 , 浏览器会自行指定一个 , 而且都有差距 , mac 上的 Firefox 更是高出了 4 像素 , 但总的来说 , 效果虽然不完美 , 但还是可以接受 , 大部分情况下都只差一个像素
然而这种方法带来了很多不确定性 , 内容区的高度是随着字体大小而变的 , 假设 font-size 是 14px, 浏览器的高度又保持一致了
浏览器
height
IE6(xp)
16
IE7(xp)
16
IE8(win7)
16
Firefox 3.5(xp)
16
Firefox 3.5(win7)
16
Firefox 3.5(mac 10.6.2)
16
Firefox 3.5(ubuntu 10.04)
16
Chrome 5(xp)
16
Chrome 5(win7)
16
Chrome 5(mac 10.6.2)
16
Chrome 5(ubuntu 10.04)
16
是否还有更好的方案呢 ?
box-sizing
height 和 padding 都无法完美控制输入框高度 , 而 border 的大小又不能改 , 难道就真的没办法了么 ? 不禁怀念 quirks 模式下的方便 , 设定一个高度就完美了 , 要是能既进 standards 模式 , 又能用到旧盒模型就好了 , 很自然地就想到了一个从来没用过的 css 属性 box-sizing, 以前一直没想好这属性到底能用在哪里 , 终于这下派上用场了 , 使用它我们就可以解决 Firefox 下 3 种 border 的区别 , 让 Firefox 自己去算内容区的高度
然而由于 IE6/7 不支持这个属性 , 所以需要写 hack, 由于 IE 下的默认 border 值是 2, padding 是 1, 所以 height 需要减 6 像素 , 也就是
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
height : 28px ;
* height : 22px ;
这样 , 就能保证绝大部分的浏览器下效果一致了 , box-sizing 属性的支持情况如下表所示 , 来自 mozilla , 支持的访问非常广
Browser
Lowest Version
Support of
Internet Explorer
8.0
box-sizing
Firefox (Gecko)
1.0 (1.0)
-moz-box-sizing
Opera
7.0
box-sizing
Safari (WebKit)
3.0 (522)
-webkit-box-sizing
不过 , 事情还没有结束 , 刚才假定了 IE 下默认 padding 是 1 像素 , 然而目前很多 css reset 都会将 input 的 padding 设为 0, 于是 , IE 下的差别将不是 6 像素 , 而是 4 像素 , 所以为了避免受到影响 , 建议将 padding 设为 0
padding-top : 0 ;
padding-bottom : 0 ;
height : 28px ;
* height : 24px ;
浏览器在 quirks 下的实现方法
回过头来看 Firefox 和 Chrome 在 quirks 模式下使用了非标准的盒模型 , 看样子是有意去做的 , 它是如何实现的呢 ?
于是在 webkit 源码中寻找 , 一开始以为它是在源码中对 quirks 下的 input 做了特殊处理 , 但没看找到又什么特别的地方 , 而在看到计算 box 高度的时候
int RenderBox::calcContentBoxHeight( int height) const
{
if (style()->boxSizing() == BORDER_BOX)
height -= (borderTop() + borderBottom() + paddingTop() + paddingBottom());
return max( 0 , height);
}
忽然想到 , 会不会是通过浏览器默认样式来实现的呢 ? 将这种特殊的逻辑直接写在代码中确实太恶心了 , 既然支持 box-sizing 属性 , 直接将它写在 quirks 的默认样式不就完美解决了么
果然 , 在 Firefox 的 res/quirk.css 中发现了这句
/*
* Quirk: Use border-box box sizing for text inputs, password inputs, and
* textareas. (b=184478 on why we use content-box sizing in standards mode)
*/
/* Note that all other <input>s already use border-box
