Heim > Artikel > Web-Frontend > Warum wird in verschiedenen Browsern unter Textbereichen zusätzlicher Platz angezeigt?
Warum wird in verschiedenen Browsern unter Textbereichen zusätzlicher Platz angezeigt?
- Patricia ArquetteOriginal
- 2024-11-04 09:38:01586Durchsuche
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>
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>
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!