Mengapa Ruang Tambahan Muncul Di Bawah Textarea dalam Pelayar Berbeza?-tutorial css-php.cn

Mengapa Ruang Tambahan Muncul Di Bawah Textarea dalam Pelayar Berbeza?

Patricia Arquette

Lepaskan： 2024-11-04 09:38:01

asal

558 orang telah melayarinya

Why Does Extra Space Appear Below Textareas in Different Browsers?

Ruang Tambahan Di Bawah Textarea: Mendedahkan Ketaksamaan Pelayar

Kehadiran ruang tambahan di bawah elemen textarea boleh menjadi isu yang menjengkelkan, berbeza-beza dalam saiz dari pelayar ke pelayar. Walaupun kesederhanaan penanda, percanggahan ini berterusan.

Untuk menjelaskan punca dan memberikan penyelesaian, mari kita mendalami kod asas:

<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>

Salin selepas log masuk

Seperti yang digambarkan dalam tangkapan skrin yang disediakan, penyemak imbas paparkan ruang tambahan ini di bawah textarea secara berbeza. Untuk menyelesaikan ketidakkonsistenan ini, penyelesaiannya terletak pada menambahkan sifat CSS berikut:

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

Salin selepas log masuk

Rasional di sebalik perbezaan ini berkaitan dengan sifat textarea sebagai elemen sebaris atau sebaris. Penyemak imbas menyimpan ruang di bawahnya untuk menampung descenders, iaitu aksara yang menjangkau di bawah garis dasar. Malangnya, sebab sebenar perbezaan saiz jurang merentas penyemak imbas masih sukar difahami.

Atas ialah kandungan terperinci Mengapa Ruang Tambahan Muncul Di Bawah Textarea dalam Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!