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

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

Patricia Arquette

リリース： 2024-11-04 09:38:01

オリジナル

607 人が閲覧しました

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