Warum wird in verschiedenen Browsern unter Textbereichen zusätzlicher Platz angezeigt?-CSS-Tutorial-php.cn

Warum wird in verschiedenen Browsern unter Textbereichen zusätzlicher Platz angezeigt?

Patricia Arquette

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

Original

558 Leute haben es durchsucht

Why Does Extra Space Appear Below Textareas in Different Browsers?

Zusätzlicher Platz unter dem Textbereich: Die Ungleichheit der Browser aufdecken

Das Vorhandensein von zusätzlichem Platz unter einem Textbereichselement kann je nach Situation ein ärgerliches Problem sein in der Größe von Browser zu Browser. Trotz der Einfachheit des Markups besteht diese Diskrepanz weiterhin.

Um die Ursache zu klären und eine Lösung bereitzustellen, schauen wir uns den zugrunde liegenden Code an:

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

Nach dem Login kopieren

Wie im bereitgestellten Screenshot dargestellt, Browser Zeigen Sie diesen zusätzlichen Platz unter dem Textbereich anders an. Um diese Inkonsistenz zu beheben, besteht die Lösung darin, die folgende CSS-Eigenschaft hinzuzufügen:

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

Nach dem Login kopieren

Der Grund für diese Ungleichheit liegt in der Natur von textarea als Inline- oder Inline-Block-Element. Browser reservieren darunter Platz für Unterlängen, also Zeichen, die über die Grundlinie hinausragen. Leider bleibt der genaue Grund für die unterschiedlichen Lückengrößen zwischen den Browsern unklar.

Das obige ist der detaillierte Inhalt vonWarum wird in verschiedenen Browsern unter Textbereichen zusätzlicher Platz angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!