Element IE7 Defaults auf 100% Breite

StackOverflow https://stackoverflow.com/questions/618507

  •  03-07-2019
  •  | 
  •  

Frage

Ich habe ein wirklich frustrierend Problem mit einer Web-Anwendung habe ich auf Arbeit (ich habe es nicht ursprünglich schreiben). Es verwendet Frames für das Layout scarily genug. Das Problem, das ich habe, ist, dass alle Elemente mit einer Hintergrundfarbe und Grenze über CSS standardmäßig auf 100% Breite eingestellt. Ich habe gerade getestet div Elemente, Absatzelemente etc.

entfernte ich das Stylesheet vollständig und getestet es dann und ich hatte das gleiche Problem, es ist also nicht das Stylesheet das Problem verursacht.

schrieb ich einen schnellen Test, um sicherzustellen, wurde Code nicht in Konflikt und verwenden die gleiche Doctype und xmlns wie bei uns - ich das gleiche Problem. Hier ist der Beispiel-Code. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

Irgendwelche Ideen?

War es hilfreich?

Lösung

Ich denke, das von HTML / CSS erforderlich ist. Blockelemente erstrecken sich über die gesamte Breite, es sei denn es etwas gibt, um sie zu stoppen.

(FF hat das gleiche Verhalten.)

Andere Tipps

Es ist nicht, weil das Element einen Hintergrund oder einen Rahmen hat, dass es mit der Eltern die volle erweitert, es ist, weil es sich um ein Block-Element ist. Der Hintergrund oder Grenze macht dich nur sehen, wie groß das Element wirklich ist.

Die Standardbreite ist eigentlich nicht "100%", sondern "auto". Der praktische Unterschied ist, daß das Element Grenze einschließlich 100% der Breite verwendet, anstatt der Breite ohne die Grenzen immer 100% der Breite (wodurch die Breite einschließlich Grenzen breiter als die Eltern).

Wenn Sie nicht das Element wollen die zur Verfügung stehende Breite verwenden, können Sie es ein schwimmendes Element machen. Dann wird es passt sich an seinen Inhalt. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>

Als Richard und BeefTurkey sagen, divs sind Blockelemente und die Breite des Browsers füllen.

Sie können entweder ein Inline-Element verwenden, wie zum Beispiel einer Spanne 

<span id="test">
    Test information!
</span>

oder etwas Art Ihres div hinzufügen, um es inline zu zwingen 

div#test { display: inline; }

Sie nicht standardmäßig auf 100% (von Eltern Größe) divs, weil sie blockiert sind? Sie können immer versuchen, Anzeige zu ändern Inline: #test {display: inline;}

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top