Warum ist display:block;width:auto; bei meiner Texteingabe nicht wie ein div verhalten und die Breite des Containers ausfüllen?
Ich hatte den Eindruck, dass ein div einfach ein Blockelement mit automatischer Breite ist. Sollten im folgenden Code das div und die Eingabe nicht die gleichen Abmessungen haben?
Wie bringe ich die Eingabe dazu, die Breite zu füllen? Eine Breite von 100 % wird nicht funktionieren, da die Eingabe eine Füllung und einen Rahmen hat (was eine endgültige Breite von 1 Pixel + 5 Pixel + 100 % + 5 Pixel + 1 Pixel ergibt). Feste Breiten sind keine Option, und ich bin auf der Suche nach etwas mehr flexibel.
Ich würde eine direkte Antwort einem Workaround vorziehen. Dies scheint eine CSS-Macke zu sein, deren Verständnis später nützlich sein kann.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, input {
border: 1px solid red;
height: 5px;
padding: 5px;
}
input, form {
display: block;
width: auto;
}
</style>
</head>
<body>
<div></div>
<form>
<input type="text" name="foo" />
</form>
</body>
</html>Ich sollte darauf hinweisen, dass ich dies bereits mit Wrapper Workarounds tun kann. Abgesehen von dieser Schraube mit der Seite Semantik und CSS-Selektor Beziehungen, die ich versuche, die Art des Problems zu verstehen und ob es durch Ändern der Art der INPUT selbst überwunden werden kann.
Ok, das ist WIRKLICH seltsam! Ich habe herausgefunden, dass die Lösung einfach darin besteht, Folgendes hinzuzufügen max-width:100% an einen Eingang mit width:100%;padding:5px; . Dies wirft jedoch noch mehr Fragen auf (die ich in einer separaten Frage stellen werde), aber es scheint, dass width das normale CSS-Box-Modell verwendet und max-width das Internet Explorer border-box-Modell. Wie sehr seltsam.
Internet Explorer 8 und Safari 4 begrenzen die maximale Breite auf 100% + padding + border, was auch in der Spezifikation vorgesehen ist. Endlich hat der Internet Explorer etwas richtig gemacht.
Oh mein Gott, das ist fantastisch! Ich bin gerade dabei, damit zu spielen, und mit viel Hilfe von den ehrwürdigen Gurus Dekan Edwards y Erik Arvidsson Ich habe es geschafft, drei separate Lösungen zusammenzustellen, um eine echte Cross-Browser-Breite von 100 % bei Elementen mit beliebiger Auffüllung und Umrandung zu erreichen. Siehe Antwort unten. Diese Lösung erfordert kein zusätzliches HTML-Markup, sondern nur eine Klasse (oder einen Selektor) und ein optionales Verhalten für den alten Internet Explorer.
