HTML：跨浏览器

不同的输入框中的默认/计算的内容高度比方说，我有以下代码HTML：跨浏览器

.username { 
 
    font-size: 30px; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    border: 2px solid #E0E0E0; 
 
}

<input class="username" type="text" />

查看现场演示http://jsbin.com/qudorugoguya/1/edit?html,css,output

据我所知，总height = content height + padding-top + padding-bottom +（border-width x 2）。

http://www.w3.org/TR/CSS21/box.html#box-dimensions

然而，当height属性没有赋值，好像计算的内容高度从浏览器更改为浏览器。就好像它是字体大小+与字体大小成比例的一些任意数量的像素的结果。

对于不同的浏览器content height具有下列值：

铬38：34像素
火狐33：35px
IE 11：34.5px
IE 8：35px

注意：我从每个浏览器的内置开发者工具中获得的值

有没有什么办法从浏览器到浏览器获得一致的值而不设置height属性或line-height属性？

来源

2014-10-17 Adrien Be

请注意，CSS Reset＆Normalizer与此问题无关。事实上，即使您在本示例中添加了CSS重置，其行为也不同，请参阅http://jsbin.com/vecugikuyivo/1/edit – 2014-10-17 14:25:59

CSS重置/规范化样式表_supposed_以提供跨浏览器一致性布局，字体，大小等方面的条款。但是，到目前为止，我已经尝试了6种不同的方法，虽然它们都能在各种事情上取得成功，但它们都不适用于这个特殊问题。所以，很好的问题！我为它+1了，因为我希望看到一个回答引用了一个特定的样式表，它实际上在所有浏览器中正常化了输入的高度... – 2014-10-17 14:52:15

用于测试6种不同复位/归一化器的+1 – 2014-10-17 15:02:39

不，除了你提到的方法之外没有办法做到这一点。即使CSS重置/规范化器也会在幕后使用这些方法。

如果跨浏览器的内容高度对你非常重要，我建议使用图片。

来源

2014-10-20 14:47:55

HTML：跨浏览器

回答

相关问题