0

看到这个 js fiddle。

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

4 回答 4

4

em单位取决于字体大小。

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

我补充说*{font-family:sans-serif}，高度问题自行解决。

于 2013-02-18T16:04:04.750 回答
0

我不是 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-18T16:08:21.120 回答
0

因为它们有不同font-size，并且您根据font-size.

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

于 2013-02-18T16:09:22.433 回答
0

您需要在父容器上定义 font-size 以将测量值与 em 统一。我进行了编辑以将字体大小分配给容器。请查看此

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

<div id="test">
    <div id="inner"></div>
    <textarea>something here...</textarea>
</div>
于 2013-02-18T16:17:52.827 回答