Pourquoi un espace supplémentaire apparaît-il sous les zones de texte dans différents navigateurs ?-tutoriel CSS-php.cn

Pourquoi un espace supplémentaire apparaît-il sous les zones de texte dans différents navigateurs ?

Patricia Arquette

Libérer： 2024-11-04 09:38:01

original

558 Les gens l'ont consulté

Why Does Extra Space Appear Below Textareas in Different Browsers?

Espace supplémentaire sous la zone de texte : découvrir la disparité des navigateurs

La présence d'un espace supplémentaire sous un élément de zone de texte peut être un problème épineux, variable en taille d'un navigateur à l'autre. Malgré la simplicité du balisage, cet écart persiste.

Pour élucider la cause et proposer une solution, examinons le code sous-jacent :

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

Copier après la connexion

Comme illustré dans la capture d'écran fournie, les navigateurs afficher différemment cet espace supplémentaire sous la zone de texte. Pour résoudre cette incohérence, la solution réside dans l'ajout de la propriété CSS suivante :

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

Copier après la connexion

La justification de cette disparité est liée à la nature de textarea en tant qu'élément en ligne ou en ligne-bloc. Les navigateurs réservent de l'espace en dessous pour accueillir les descendants, qui sont des caractères qui s'étendent en dessous de la ligne de base. Malheureusement, la raison exacte des différences dans la taille des écarts entre les navigateurs reste insaisissable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!