很久以前 Roger Johansson 就在他的 blog 上做了一个 用样式控制表单元素 的测试 , 告诉我们企图用样式控制表单元素是一件不可能的事情
using CSS to style form controls to look exactly the same across browsers and platforms is impossible
甚至 css2.1 规范中也没有明确这方面的规定 , 而是打算将它 fix in future
CSS 2 . 1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.
所以如果想要让表单元素在各个浏览器下完全一致 , 最好的解决方法莫过于完全不理会操作系统的样式 , 用自定义的 ui 风格 , 就像 bing 或 Google 的 Jazz UI 那样
然而 , 这会导致界面和用户的系统格格不入 , 目前 google 主要还是针对浏览器做了些特殊处理 , 如 webkit 下用 gradient 使得按钮看上去好些
mac 下 webkit 的按钮不好控制
本文将就输入框高度的问题进行调研 , 寻找更好的解决方法
输入框高度
首先 , 这个调研的一个主要原因是 , 搜索结果页打算进入标准模式 , 这会导致盒模型的变化 , 造成输入框高度和原来不一样 , 所以为了和线上效果保持一致 , 我们需要找到一个最佳的解决方案
有同学可能会不解 , 有那么难么 ? 设置一个 height 不就解决了么 ?
<input type= "text" style= "height:28px" />
然而 , 经测试发现这里面的细节问题还是还挺多 , 由于资源有限 , 这里只测试了主要的浏览器和平台 , 包括目前主要用到的 5 个浏览器
· IE6(xp)
· IE7(xp)
· IE8(win7)
· Firefox 3.5(xp)
· Firefox 3.5(win7)
· Firefox 3.5(mac 10.6.2)
· Firefox 3.5(ubuntu 10.4)
· Chrome 5(xp)
· Chrome 5(win7)
· Chrome 5(mac 10.6.2)
· Chrome 5(ubuntu 10.4)
通过设定 height 的方式
我们的目标是和目前搜索框大小保持一致 , 既 28px
首先测试的是最简单的 height, 先看目前线上的方案 ( 简单起见就直接写到 style 中了 )
<input type= "text" style= "font: 16px arial; height: 1.78em; padding-top:2px" />
从样式上推导 , 由于盒模型问题 , 在 IE 下的大小将是 1.78 * 16 = 28px, 而 Firefox 等浏览器应该是 1.78 * 16 + 2px + border-width * 2 = 30 + ? px
测试结果是
浏览器
height + padding-top + padding-bottom + border-top-width + border-bottom-width
IE6(xp)
21 + 2 + 1 + 2 + 2 = 28
IE7(xp)
21 + 2 + 1 + 2 + 2 = 28
IE8(win7)
21 + 2 + 1 + 2 + 2 = 28
Firefox 3.5(xp)
21 + 2 + 1 + 2 + 2 = 28
Firefox 3.5(win7)
23 + 2 + 1 + 1 + 1 = 28
Firefox 3.5(mac 10.6.2)
19 + 2 + 1 + 3 + 3 = 28
Firefox 3.5(ubuntu 10.04)
19 + 2 + 1 + 3 + 3 = 28
Chrome 5(xp)
21 + 2 + 1 + 2 + 2 = 28
Chrome 5(win7)
21 + 2 + 1 + 2 + 2 = 28
Chrome 5(mac 10.6.2)
21 + 2 + 1 + 2 + 2 = 28
Chrome 5(ubuntu 10.04)
21 + 2 + 1 + 2 + 2 = 28
效果相当理想 , 所有浏览器都是 28px, 看来即使是 Firefox 和 Chrom 在 quirks 模式下的 input 都没有遵循盒模型 , 所以线上的输入框高度在各个浏览器下很完美地保持一致
然而如果是在 standards 模式下 , 结果则是
浏览器
height + padding-top + padding-bottom + border-top-width + border-bottom-width
IE6(xp)
28 + 2 + 1 + 2 + 2 = 35
IE7(xp)
28 + 2 + 1 + 2 + 2 = 35
IE8(win7)
28 + 2 + 1 + 2 + 2 = 35
Firefox 3.5(xp)
28 + 2 + 1 + 2 + 2 = 35
Firefox 3.5(win7)
28 + 2 + 1 + 1 + 1 = 32
Firefox 3.5(mac 10.6.2)
28 + 2 + 1 + 3 + 3 = 37
Firefox 3.5(ubuntu 10.04)
28 + 2 + 1 + 3 + 3 = 37
Chrome 5(xp)
28 + 2 + 1 + 2 + 2 = 35
Chrome 5(win7)
28 + 2 + 1 + 2 + 2 = 35
Chrome 5(mac 10.6.2)
28 + 2 + 1 + 2 + 2 = 35
Chrome 5(ubuntu 10.04)
28 + 2 + 1 + 2 + 2 = 35
就仅仅加了一句 <!DOCTYPE html> , 却导致浏览器差距变得如此大 , 仔细观察发现 , 主要问题在 Firefox 上 它的 border 在 win7 下是 1 像素 , xp 下是 2 像素 , mac 下是 3 像素 , 令人很头疼 , 于是打算换一种方案试试
