文字區域下方的額外空間:揭示瀏覽器的差異
文字區域元素下方存在額外空間可能是一個令人煩惱的問題,不同的不同瀏覽器的大小。儘管標記很簡單,但這種差異仍然存在。
為了闡明原因並提供解決方案,讓我們深入研究底層程式碼:
<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中文網其他相關文章!