CSS高度如何應用於輸入字段？

Question

我使用em作為單位時，在理解css height屬性如何應用於input字段時遇到了一些困難。

看看這個jsfiddle： jsfiddle

如果em值等於基本字體大小，則示例1和3的高度應相同。 如果em基於元素中設置的字體大小（我認為是正確的），則示例一和示例二的大小應相同。 實際上，這些項目都沒有相同的大小。 如果將高度設置為px則可以將它們的大小都設置為相同。

是什么使我的所有輸入框都具有不同的大小？

CSS：

.one {
  max-height:3em;
  height: 3em;
  font-size:1em;
  vertical-align: top;
}

.two {
  max-height:6em;
  height: 6em;
  font-size: 0.5em;
  vertical-align:top;
}

.three {
  max-height:3em;
  height: 3em;
  font-size: 0.5em;
  vertical-align:top;
}

HTML：

<input type="text" class="one" placeholder="one">
<input type="text" class="two" placeholder="two">
<input type="text" class="three" placeholder="three">

Answer 1

如果em基於元素中設置的字體大小（我認為是正確的）

不，那是不正確的。

給定高度的em是基於父元素的字體大小，而不是元素本身的字體大小。

當使用em時，輸入的字體大小也基於/繼承自其父字體大小。

因此，這是一個完整的主意，因此如果父級的字體大小更改，它們的縮放比例將相等。

這是一個示例，顯示

 div { font-size: 30px; margin: 20px 0; } .em1 { font-size: 1em; } .em2 { font-size: 2em; } .one { max-height:3em; height: 3em; font-size:1em; vertical-align: top; } .two { max-height:6em; height: 6em; font-size: 0.5em; vertical-align:top; } .three { max-height:3em; height: 3em; font-size: 0.5em; vertical-align:top; } 

 <div> <input type="text" class="one" placeholder="one"> <input type="text" class="two" placeholder="two"> <input type="text" class="three" placeholder="three"> </div> <div class="em1"> <input type="text" class="one" placeholder="one"> <input type="text" class="two" placeholder="two"> <input type="text" class="three" placeholder="three"> </div> <div class="em2"> <input type="text" class="one" placeholder="one"> <input type="text" class="two" placeholder="two"> <input type="text" class="three" placeholder="three"> </div> 

Answer 2

實際上，這似乎是Chrome / Safari中的錯誤。 Firefox和Opera可以正確呈現它們。

解決此問題以使其在所有瀏覽器中呈現相同效果的一種方法是使用rem而不是em ： https : //www.sitepoint.com/understanding-and-using-rem-units-in-css/

但是，這還有其他潛在的陷阱和影響

Answer 3

這是因為您使用的em等於所應用em的元素的計算字體大小。 為了獲得更好的解釋，請閱讀此內容 。