标准: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作为最后的手段。提前谢谢大家:))