1. 首頁
  2. 問答
  3. 如何文本框的高度在HTML計算

如何文本框的高度在HTML計算

2015-09-06 85 views
1

雖然我已經提到盒模型，但無法跟蹤 被如何計算一個文本框或任何HTML元素的高度在下面撥弄如何文本框的高度在HTML計算

<input type="text" id="test" onclick= "alert('computed height ' + window.getComputedStyle(this).height + ' and font-size ' + window.getComputedStyle(this)['font-size'])" name="test" value="Click here to get height" style=" 
 
    padding: 0px; 
 
    border: 0px;  
 
    line-height: 1; 
 
"/>

我無法找到文本框的高度如何15px的，即使有0邊框，0保證金，0填充和13.33px字體大小。

編輯 - 儘管Firefox的作​​品完美的計算，但變焦後它減少了部分內容 Text on Firefox

Text on Chrome

它似乎鉻適用一些格式渲染比Firefox更好。

來源

2015-09-06 Sid

+3

可能依賴於瀏覽器...我得到基於縮放級別不同的值。 –

+0

順便說一句，在Firefox中，計算出的高度也是13.33px。 IE 11,15.33。:) – sinisake

+0

我想知道是否有可用於此行爲的規格 – Sid

回答

0

你檢查行高？嘗試將它設置爲某些像素值

如果未指定高度，和邊界，填充爲0，那麼這將是行高值，是原因。每個瀏覽器都有自己的預先定義的CSS。所以你必須重置你的css中的大部分（主要是在頂部），所以所有的瀏覽器呈現相同的

編輯：我的意思是，行高：1將在每個瀏覽器基於瀏覽器預定義樣式不同，最初是否重置了身體的線高？找出簡單的方法是給行高一個像素值，並檢查爲什麼您不要使用偏移所有的瀏覽器

來源

2015-09-06 16:05:43 Webpandit

+0

我已經將它設置爲1，這意味着行高應該與字體大小相同（這裏是13.33） – Sid

+0

我試着設置了兩者，但沒有成功，仍然在chrome上顯示15px – Sid

1

確定這裏的解釋是，我學會了特靈。

參考規範 http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

它說

[內聯元素的]內容區域的高度應根據該字體，但該規範沒有規定如何。 UA可以，例如，使用EM-箱或最大伸和字體的伸...

Chrome和消防狐狸有行高度不同的實現

CHROME- Chrome會忽略行高度，如果它是不能夠完美呈現，並會增加空間完全適合文本。

FireFox- 火狐也將忽略該行高度如果小於字體大小，但它會提供如字體大小提供精確的空間即使不能夠很好地呈現它。

來源

2015-09-06 18:17:52 Sid

相關問題

 相關問題