ホームページ  >  記事  >  ウェブフロントエンド  >  異なるブラウザでテキストエリアの下に余分なスペースが表示されるのはなぜですか?

異なるブラウザでテキストエリアの下に余分なスペースが表示されるのはなぜですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-04 09:38:01585ブラウズ

Why Does Extra Space Appear Below Textareas in Different Browsers?

テキストエリアの下の余分なスペース: ブラウザの不均衡を明らかにする

テキストエリア要素の下に余分なスペースが存在することは、状況によって厄介な問題となる可能性があります。ブラウザごとのサイズ。マークアップが単純であるにもかかわらず、この不一致は依然として存在します。

原因を解明して解決策を提供するために、基礎となるコードを詳しく調べてみましょう。

<code class="html"><html>
    <head>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .main {
                background-color: red;
            }
            textarea {
                background-color: gray;
                resize: none;
                margin: 0;
                border: 0 none;
                padding: 10px;
                height: 50px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <textarea></textarea>
        </div>
    </body>
</html></code>

提供されたスクリーンショットに示されているように、ブラウザーはテキストエリアの下にあるこの余分なスペースを別の方法で表示します。この不一致を解決するには、次の CSS プロパティを追加することが解決策となります。

<code class="css">textarea {
    vertical-align: top;
}</code>

この不一致の背後にある理論的根拠は、インライン要素またはインラインブロック要素としての textarea の性質に関連しています。ブラウザーは、ベースラインの下に伸びる文字であるディセンダーを収容するために、その下にスペースを予約します。残念ながら、ブラウザ間でギャップ サイズが異なる正確な理由は依然としてわかりません。

以上が異なるブラウザでテキストエリアの下に余分なスペースが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。