HTML textarea renders much narrower than what's specified in the CSS_问答_开发者

HTML textarea renders much narrower than what's specified in the CSS

开发者 https://www.devze.com 2023-02-25 00:09 出处：网络

Given the following HTML: <!DOCTYPE html> <html lang=\'en\'> <head> <meta charset=\'iso-8859-1\' />

相关专题：css

Given the following 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>

How do I get the textarea to be the same width as the div right above it? I'm trying to set each of the elements to roughly the same width, which for now is 52 em, but the textarea is rendering 开发者_StackOverflow社区narrower than that. I understand that rendering engine minutiae can throw things off by a few pixels, but the difference here is much more than that (maybe 40% too small).

I'm testing in Safari 5.

The em measurement is based on the font used for the element.

By default (in Firefox 3.6.x on OS X, anyways), <textarea> elements default to a monospace font.

Make sure you have a font applied to the element, and they should match up.

Live Demo

HTML textarea renders much narrower than what's specified in the CSS

Try modifying your cols attribute. That should also change the size of the textbox.

First, remove the cols attribute.

Then, since an em is a unit based on the size of the element's font, you need to make sure that each of the elements that you are trying to size to 52em have the same font-family and font-size css defined.

Or, use pixels for the width and you shouldn't have to worry about the font.

I tried it in Firefox and just setting the font-size:9pt for each element and leaving out the font-family worked great.