IE6 Seltsamkeit - erstes Listenelement eingerückt

CSS ist nicht meine starke Klage, und ich bin nicht sicher, was mit meinen Listenelementen in IE6 los ist. Ich möchte, dass sie vertikal ausgerichtet sind, aber das erste Listenelement wird immer ein oder zwei Pixel weit nach rechts geschoben, sodass es nicht mehr mit den anderen Mitgliedern in der Liste übereinstimmt. Soweit es mich betrifft, sieht diese Liste in IE7/8, FF3 und Chrome 2 (alle unter Windows) gut aus.IE6 Seltsamkeit - erstes Listenelement eingerückt

Hier ist, wie es in IE6 aussieht ... beachten Sie, dass Vangala Eintritt nicht richtig eingezogen wird:

alt text http://img254.imageshack.us/img254/8123/ie6liindent.png

Hier ist meine relevante CSS:

.organizer-label { 
    float: left; 
    width: 145px; 
} 

.organizer-value { 
    margin-left: 150px; 
} 

.organizer-value ul { 
    margin-left: 1em; 
    margin-top: 0; 
    padding-left: 0; 
    padding-top: 0; 
    line-height: 1.1em; 
}

Hier ist meine relevant html:

<div class="organizer-subsection"> 
    <div class="organizer-label">Committee members:</div> 
    <div class="organizer-value"> 
    <ul> 
     <li>Vangala Subrahmanyam, Sai Advantium Pharma Ltd, Pune, India</li> 
     <li>Ramaswamy Iyer, Bristol-Myers Squibb, Lawrenceville, USA</li> 
     <li>Ragu Ramanathan, Bristol-Myers Squibb</li> 
    </ul> 
    </div> 
</div>

Mache ich etwas Dummes und nur Glück haben, dass es in den meisten Browsern gut aussieht? Was kann ich tun, damit die Liste in IE6 richtig ausgerichtet wird?

Quelle

2009-07-02 Chris Farmer

Die Kaskadenform von CSS macht es zu einem kniffligen Biest. Ich würde zuerst versuchen, Regeln für * alle * die Eigenschaften der fraglichen Elemente explizit zu definieren, d. H. Nicht nur Regeln für die ul, sondern auch für die li. Und nicht nur linke und obere Ränder und Polsterung, sondern auch unten und rechts. Und Einrückungsregeln, Zeilenhöhen, Rahmen, Anzeige und so weiter. Versuchen Sie, über absolut alles explizit zu sein, um auszuschließen, dass eine ungerade Regel durchläuft, wo Sie es nicht erwarten. Ich füge das als Kommentar nicht als Antwort hinzu, da ich nicht weiß, ob es das Problem beheben wird, aber möglicherweise hilft, das Problem zu beheben. –

Die Frage ist, sollten Sie sich wirklich für IE6 interessieren? http://ajaxian.com/archives/i-wont-support-ie-6-in-2009 – jao

Ja, ich muss mich kümmern. Traurig. Siehe http://stackoverflow.com/questions/1054351/where-can-i-get-browser-use-data-broken-down-by-country –

Sie müssen hasLayout an das div .organizer-value

anwenden

Quelle

2009-07-02 11:31:51 Emily

Sieht aus wie etwas Gemeinheit in Ihrem CSS. Wenn ich das richtig verstanden habe, und ich hoffe, dass Sie die Mitglieder des Ausschusses auf der rechten Seite des Titels "Ausschussmitglieder" sehen wollen, tendieren wir dazu, Margen möglichst zu vermeiden Es gibt einige lustige und interessante Bugs für den unachtsamen Entwickler.

Die folgenden können Ihnen helfen, aber ich kann nicht ehrlich sagen, was es mit dem Rest Ihrer Seite tun wird.

.organizer-label { 
    float: left; 
    width: 145px; 
} 

.organizer-value { 
    padding-left: 5px; 
    float: left; 
} 

.organizer-value ul { 
    margin-left: 1em; 
    margin-top: 0; 
    padding-left: 0; 
    padding-top: 0; 
    line-height: 1.1em; 
}

Hoffnung, dass diese

Quelle

2009-07-02 07:17:29

versuchen hilft es, ".organizer-Wert {overflow: hidden; float: left;}"

Hoffnung, dass dies hilft

Quelle

2009-07-02 07:41:55

Es ist ein float-Bug. Sie können Schritt für Schritt durch die Verschachtelung der ul in einem Wrapper div wie so;

<div class="organizer-subsection"> 
    <div class="organizer-label">Committee members:</div> 
    <div class="organizer-value"> 
    <div> 
     <ul> 
      <li>Vangala Subrahmanyam, Sai Advantium Pharma Ltd, Pune, India</li> 
      <li>Ramaswamy Iyer, Bristol-Myers Squibb, Lawrenceville, USA</li> 
      <li>Ragu Ramanathan, Bristol-Myers Squibb</li> 
     </ul> 
    </div> 
    </div> 
</div>

und Ändern der .organizer-Wertdefinition in diese;

.organizer-value { 
    float:left; 
}

Floats sind böse in IE (wie alles, was entfernt nützlich ist, dass CSS tut). Die Plus-Seite solcher häufigen Bugs ist, dass sie ziemlich gut dokumentiert sind. PositionIsEverything ist eine nützliche Website für die Fehlersuche bei IE-Anzeigefehlern.

Quelle

2009-07-02 18:03:40 Mathew

Ich wollte meine eigene Antwort posten, aber da bist du schon Verknüpfen mit PIE, vielleicht können Sie einen Link zu seiner Beschreibung dieses spezifischen Problems hinzufügen. Es ist der 3-Pixel-Text-Jog: http://www.positioniseverything.net/explorer/threepxtest.html. – mercator

Ich habe nicht verlinkt, weil ich nicht wusste, wie der Fehler heißt, ich habe es gerade herausgefunden und einen Fix gepostet. :) Der PIE Link war nur für zukünftige Ref! +1 für den genauen Link, Prost. – Mathew

Von another question hier auf SO, verweisen Leute IE7-js library. IE6 sollte sich wie ein standardkonformer Browser verhalten. Dies könnte auch Ihr Abstandsproblem beheben.

Quelle

2009-07-02 18:15:41 jao

IE6 Seltsamkeit - erstes Listenelement eingerückt

Antwort

Verwandte Themen