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

Patricia Arquette
リリース: 2024-11-04 09:38:01
オリジナル
558 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート