gefloatete Elemente in li erzeugen bottom-Abstände bei ie6/ie7

[molily]

dennoch wurmt es mich hier wieder extra-Angaben machen zu müssen. Gibts da was eleganteres, was ich vergessen habe?

Ich denke nicht. Extra-Angaben kannst du hier m.W. nicht vermeiden.

Grundsätzlich gehts um gefloatete Elemente innerhalb von li, hier etwas Beispielcode, man beachte die unmotivierten Bottom-Abstände, vermutlich reserviert ie hier Platz für Unterlängen...

Ja, richtig vermutet. IE erzeugt da wohl eine Art Line-Box und positioniert das Float auf der Baseline. Daher hilft:

li div {  
  vertical-align:top; /* oder bottom, jedenfalls nicht baseline */  
}

Alternativ könntest du im IE 7 auf Floats verzichten zugunsten von Inline-Elementen mit hasLayout. Die verhalten sich ähnlich zu Floats und entsprechend grob dem, was CSS-konforme Browser als inline-block kennen.

li div {  
  float: none;  
  display: inline;  
  zoom: 1;  
  height: 90px;  
  width: 130px;  
  background: red;  
}

Dritte Möglichkeit: Das li von display:block auf display:inline umstellen, aber hasLayout erhalten und die Breite auf 100% setzen.

li {  
  display: inline;  
  width: 100%;  
  zoom: 1;  
  ..  
}

Gut, das ist jetzt auch nicht sonderlich eleganter, aber das sind Workarounds, die ich häufiger gebraucht habe. Negative Margins würde ich möglichst vermeiden, zumal das Problem hier auf Phantom-Line-Boxen eingrenzbar ist.

Mathias