Question

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;    
}

Answer 1

em单位取决于字体大小。

body和textarea的默认字体通常不是相同的高度（因为它们不是相同的字体）

我添加了*{font-family:sans-serif}并且高度问题已经解决了。

Answer 2

我不是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

另外添加一个强制字体大小

body{
font-size:12px;

}

请注意！别忘了Jfiddle正在使用normlizer CSS！

Answer 3

因为它们具有不同的font-size，您根据font-size设置高度。

使用Firebug我检查了font-size和div的{{1}}，第一种情况是16px，textarea 12px。这是一种标准的浏览器行为：它们在textarea中应用与网站其他部分不同的字体大小。您可以尝试手动或使用CSS重置应用相同的字体大小。

Answer 4

您需要在父容器上定义字体大小以使用em统一测量值。我已经进行了编辑以将font-size指定给容器。请查看this

我在它周围添加了一个包装

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

为什么这个div和textarea的高度不一样

4 个答案: