Question

给出以下HTML：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='iso-8859-1' />
    <title>Test</title>
    <style>
        #IssuesListFieldSet {
            width: 52em;
            padding: 0;
            margin: 0;
        }

        #IssuesList_result {
            width: 52em;
            padding: 0;
            margin: 0;
            border: 1px solid red;
        }

        #IssuesList_result_html {
            width: 52em;
            height: 100px;
            display: block;
            padding: 0;
            margin: 0;
            border: 2px solid cyan;
        }
    </style>
</head>
<body>

<form action='#' method='post'>
    <fieldset id="IssuesListFieldSet">
        <legend>Issues:</legend>
        <div id="IssuesList_result">
            Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
        </div>

        <textarea readonly id='IssuesList_result_html' cols='20' height='5'>
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
        </textarea>
    </fieldset>
</form>

</body>
</html>

如何让textarea的宽度与它上方的div相同？我正在尝试将每个元素设置为大致相同的宽度，现在为52 em，但textarea的渲染范围要窄于此。据我所知，渲染引擎细节可以减少几个像素，但这里的差异远大于此（可能40％太小）。

我在Safari 5中测试。

Answer 1

em测量基于元素使用的字体。

默认情况下（在OS X上的Firefox 3.6.x中，无论如何），<textarea>元素默认为monospace字体。

确保您已将字体应用于该元素，并且它们应匹配。

<强> Live Demo

Answer 2

尝试修改cols属性。这也应该改变文本框的大小。

Answer 3

首先，删除cols属性。

然后，由于em是基于元素字体大小的单位，因此您需要确保您尝试调整为52em的每个元素都具有相同的font-family和font-size css已定义。

或者，使用像素作为宽度，您不必担心字体。

我在Firefox中尝试过，只为每个元素设置font-size：9pt，而且省略了font-family的效果。

HTML textarea比CSS中指定的要窄得多

3 个答案: