HTML: is input box default/calculated content height different across browsers

五迷三道 提交于 2019-12-22 06:49:42

问题


Let's say I have the following code

.username {
  font-size: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 2px solid #E0E0E0;
}
<input class="username" type="text" />

See live demo on http://jsbin.com/qudorugoguya/1/edit?html,css,output

I understand that the total height = content height + padding-top + padding-bottom + (border-width x 2).

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

However, when the height property is not assigned a value, it seems like the calculated content height changes from browser to browser. As if it was the result of the font-size + some arbitrary number of pixels proportional to the font-size.

For different browsers content height has the following values:

  • Chrome 38: 34px
  • Firefox 33: 35px
  • IE 11: 34.5px
  • IE 8: 35px

Note: I got the values from each browsers' built-in developer tool

Is there any way to get consistent values from browser to browser without setting the height property nor the line-height property ?


回答1:


Nope, there is no way of doing it besides the methods you have mentioned. Even CSS resets/normalizers will use these methods behind the scenes.

If cross browser content heights are very important to you, I suggest using images.



来源:https://stackoverflow.com/questions/26426856/html-is-input-box-default-calculated-content-height-different-across-browsers

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!