2008-12-12 4 views
5

Ich habe ein div-Tag über CSS gestylt. Ich setze Padding auf 10px (Padding: 10px), es funktioniert genau so, wie ich es in Firefox und IE7 wollte, aber in IE6 fügt es zusätzliche Padding am unteren Rand hinzu (ungefähr 2-3px, denke ich). Hat jemand eine Vorstellung davon, was hier passiert?IE6 extra Polsterung am Boden

[update]

ich dies nur bemerkt, der div-Tag ich rede hat ein Hintergrund-Bild. Wenn ich das Hintergrundbild entfernt habe, verschwindet die zusätzliche Füllung auf der Unterseite. Irgendwelche Ideen?

[ein weiteres Update, Codebeispiel]

Hier ist die CSS zu meinem div-Tag angewendet:

.user-info{ 
    margin-top: 20px; 
    margin-right: 20px; 
    padding: 10px; 
    background-image: url("../img/user_panel_bg.png"); 
    float:right; 
    border: 1px #AAAAAA solid; 
    font-size:12px; 
} 
+0

können Sie diesen Beitrag bearbeiten, um ein Codebeispiel – bendewey

+0

Ditto zu umfassen. Es könnte eine Menge Gründe dafür geben (IE 6 hat ein ziemlich schrulliges Box-Modell, das wahrscheinlich das verursacht, aber wir können nicht ohne etwas Code erzählen). –

+0

Ich habe das gleiche Problem mit Padding und Hintergrundbild erfahren. Ich konnte es niemals lösen.Meine Arbeit war um zu entfernen und Auffüllen und stattdessen eine Grenze (die funktionierte, weil es weiß auf weiß war) ... Ein Geheimnis ... –

Antwort

17

Gibt es ein Bild in Ihrem div? Wenn es ein Bild gibt es einen Bug im Internet Explorer 6, der Leerraum innerhalb des div verursachen können

extra gepolsterter Boden Pfund extra erstellen zeigt sich mit

<div> 
<img src="myimage.jpg"> 
</div> 

Extra-Polsterung nicht zeigen nicht, wenn ändern Sie Ihre HTML

<div><img src="myimage.jpg"></div> 
+0

Über ein Jahr später, aber +1 von mir :-) Möglicherweise der wahnsinnigste IE6-Bug Das habe ich schon mal erlebt. Ta Kibbee! –

+1

3 Jahre später und +1 von mir. Das Gleiche gilt für IE8. – yosh

+2

try img {Anzeige: Block; } – yoshyosh

4

Ich würde empfehlen, einen Blick auf die positioniseverything.net Website und die Berichterstattung über IE Probleme und Abhilfemaßnahmen unter . Werfen Sie einen Blick auf die Holly Hack-Sektion - ich glaube, Sie werden die Antwort dort finden.

[Bearbeiten - hinzugefügt] werfen Sie einen Blick here für die 3px Frage, Erklärung und beheben

Für Box-Einstellungen und Browser-Unterschied, sitepoints box model article bietet einen guten Einblick, wie gut.

2

Haben Sie versucht, Ihren DIV Überlauf zu verstecken? overflow:hidden;

Bearbeiten: Sie können auch versuchen, display: inline;, wenn Sie über horizontale schieben sprechen.

0

möglicherweise 'margin' oder 'border' Eigenschaften?

0

Sie können auch wie ein CSS reset style sheet etwas betrachten, die Sie Voreinstellungen einrichten lassen, die in allen Browsern maßen konsistent sein sollte.

1

Stellen Sie sicher, dass die Schriftgröße nicht das Problem verursacht. Sogar ohne Text innerhalb eines Containerelements (z. B. für eine Bodenkappe auf einem dehnbaren Container) wird IE6 immer noch die Höhe der Box nicht kleiner als die Schriftgröße (sogar mit einer expliziten Höhe eingestellt).

Also, für Beispiel: wenn Sie den HTML-Code:

<div class="box"> 
    <h1>Heading</h1> 
    <p>This is the main content.</p> 
    <div class="bottom"></div> 
</div> 

... Sie werden diese CSS benötigen:

<style type="text/css"> 
    .box { 
    background: url(bg-middle.jpg) repeat-y; 
    } 
    .box h1 { 
    background: url(bg-top.jpg) no-repeat; 
    } 
    .box .bottom { 
    background: url(bg-image.jpg) no-repeat; /* bottom cap image */ 
    height: 10px;        /* height of your bg image */ 
    font-size: 1px;       /* for IE6 */ 
    } 
</style>