爲什麼這個div和textarea的高度不一樣

請參閱this js fiddle。爲什麼這個div和textarea的高度不一樣

HTML：

<div></div> 
<textarea>something here...</textarea>

CSS：

textarea { 
    height: 1em; 
    float:left; 
    padding: 0.5em; 
    border-width: 1px; 
    border-color: #ff0000; 
    border-style: solid; 
    margin: 0; 
    width: 20em; 
} 

div { 
    height: 2em; 
    float:left; 
    width: 2em; 
    margin: 0; 
    padding: 0; 
    border-width: 1px;  
    border-color: #ff0000; 
    border-style: solid; 
    margin: 0;  
}

來源

2013-02-18 SystemicPlural

textarea的具有高度：1EM; div有高度：2em; 區別是1em？ – 2013-02-18 16:02:14

@GertKommer由於textarea上的「padding」，高度相等。但textarea的字體大小爲13px，而div的大小爲16px（至少在我的環境中）。 – hsan 2013-02-18 16:03:10

@GertKommer，textarea有填充，它應該使它相同的高度，頂部和底部填充+高度=實際高度 – martincarlin87 2013-02-18 16:03:17

的em單元依賴於字體大小。

的默認字體的身體和textarea的通常高度不一樣（因爲他們是不一樣的字體）

我加*{font-family:sans-serif}和身高問題本身固定。

來源

2013-02-18 16:04:04

但如果在div或textarea中沒有文字爲什麼文本很重要？ – 2013-02-18 16:06:41

只是因爲沒有文字並不意味着字號不是問題。 'em'單位是根據字體大小定義的。 – 2013-02-18 16:08:30

，因爲'textarea'與'div'具有不同的默認字體大小，高度是不同的？ – 2013-02-18 16:10:00

林不是100％確定你看到什麼。這是什麼瀏覽器？香港專業教育學院做了一些改動 http://jsfiddle.net/hgHLe/

textarea { 
    height: 1em; 
    float:left; 
    padding: 0.5em; 
    border-width: 1px; 
    border-color: #ff0000; 
    border-style: solid; 
    margin: 0; 
    width: 20em; 
} 

.child { 
    height: 2em; 
    overflow:none; 
    float:left; 
    width: 2em; 
    margin: 0; 
    padding: 0; 
    border-width: 1px;  
    border-color: #ff0000; 
    border-style: solid; 
    margin: 0;  
} 
.master{ 

    height: 2em; 

} 



<div class='master'><div class='child'>:D</div> 
    <textarea>something here...</textarea></div>

增加了一個名爲.master 代替你的潛水與.child

添加溢出：無;掌握藏漢爲2em的

additnly加入勢力字體大小

body{ 
font-size:12px;

}

注意！不要忘記Jfiddle使用了normlizer CSS！

來源

2013-02-18 16:08:21

因爲他們有不同的font-size，你正在設置的高度取決於font-size。

用Firebug我檢查都div和textarea的font-size，在第一種情況下它是16像素，並在textarea 12像素。這是一種標準瀏覽器行爲：它們在網站的其他部分應用textarea不同的字體大小。您可以嘗試手動應用相同的字體大小或使用CSS重置。

來源

2013-02-18 16:09:22 Aljullu

您需要在父容器上定義一個字體大小來統一與em的測量。我已經做了一個編輯，將font-size分配給一個容器。請查看this

我加入了它周圍的包裝

<div id="test"> 
    <div id="inner"></div> 
    <textarea>something here...</textarea> 
</div>

來源

2013-02-18 16:17:52 jagzviruz

爲什麼這個div和textarea的高度不一樣

回答

相關問題