跨浏览器输入&选择高度一致性

时间:2016-02-24 13:56:19

标签: html css html5 height consistency

标准:HTML& CSS /样式; 需求:跨浏览器(至少FF,IE和GC)高度一致性; 适用于:HTML5 INPUT& SELECT元素。

条件

一个。元素必须从父元素继承行高(SELECT元素可能不受行高影响,但必须保持高度一致性);

湾元素不能按高度绑定,也就是说,它们应该通过字体大小和行高的影响来增长/缩小;

℃。行高不能以显式单位(Xpx)表示,而是以通用比率(1,1.5,2等)表示;

环境:元素将拥有自己的填充框,并将框模型设置为边框;

我的CSS重置需要修复

body{font-family: Verdana, Tahoma, Arial; font-size: 14px; line-height: 1.44;}
input, select, textarea{box-sizing: border-box; border: 1px Grey solid; padding: 5px; font-family: inherit; font-size: inherit; line-height: inherit; vertical-align: top;}
input::-moz-focus-inner{border: 0; padding: 0;} /* Firefox fix */

期望的影响力

一个。无论为BODY元素指定的字体系列和字体大小如何,INPUT& SELECT元素将始终与主要Web浏览器保持像素完全相同的高度;

湾主要Web浏览器的高度始终保持不变。就像,如果FF使高度为24px的INPUT,GC也会使其成为24px,其他人也是如此(对于IE,我不关心向后兼容性,Edge引擎兼容性还不错,如果Edge有bug ,相当不错);

感谢:与此斗争了好几个小时,真的需要永久结束这个终身问题。将StackOverflow作为最后的手段。提前谢谢大家:))

0 个答案:

没有答案