HTML：是输入框默认/计算的内容高度不同的浏览器 [英] HTML: is input box default/calculated content height different across browsers

问题描述

假设我有以下代码

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

 < input class =usernametype =text/>  

在 http://jsbin.com/qudorugoguya/1/edit?html上进行现场演示， css，output

我知道总高度= content height + padding-top + padding-bottom +（border-width x 2） p>

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

但是，当 height 属性未分配值，似乎计算的内容高度从浏览器更改为浏览器。

对于不同的浏览器内容高度，可能是因为font-size +一些任意数目的像素与字体大小成比例。 具有以下值：

• Chrome 38：34px


• Firefox 33：35px


• 
  
• 
  


• 
  

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

  
  
  

  有什么方法可以从浏览器到浏览器获得一致的值，而不设置 height 属性或 line-height 属性？ $ b

  解决方案

  不，没有办法除了你提到的方法。

  
  
  

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

  
  

  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 ?

  解决方案

  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.

  这篇关于HTML：是输入框默认/计算的内容高度不同的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！