テキストエリアの下の余分なスペース: ブラウザの不均衡を明らかにする
テキストエリア要素の下に余分なスペースが存在することは、状況によって厄介な問題となる可能性があります。ブラウザごとのサイズ。マークアップが単純であるにもかかわらず、この不一致は依然として存在します。
原因を解明して解決策を提供するために、基礎となるコードを詳しく調べてみましょう。
<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 サイトの他の関連記事を参照してください。