Element mit CSS display: none; brechen layout - Versatz verursacht

Schrott Ansatz und Verwenden Sie Hintergrund-Bilder

http://jsfiddle.net/P5CKC/2/

<ul class="menu">
    <li><span>Li</span></li>
    <li><span>Li</span></li>
    <li><span>Li</span></li>
    <li class="change"><span>Li</span></li>
    <li><span>Li</span></li>
</ul>

CSS

ul.menu {
    overlflow: hidden;
}
ul.menu li {
    float: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    text-align:center; 
    margin: 0 0 0 -25px; 
    width: 152px;
    line-height: 35px;
    height: 35px;
    background: url(../bct-white.png) no-repeat;
    color: #0091c1;
}
ul.menu li span {
    background: url(/green.png) no-repeat 5px 6px;
    display: block;
}
ul.menu li.change span {
    background-image: url(/red.png);
}

CSS2.0 und browser-Kompatibilität

Code-Anwendung, die ich zur Verfügung gestellt haben, ist Css2.0 und sollte damit problemlos in IE7 und höher.

1. Entfernt img tags und implemmented ästhetik (Bilder) als hintergrund
2. Extra span musste Hinzugefügt werden, weil CSS2 erlaubt nur 1 Hintergrundbild pro element
3. Li-tag hält den Pfeil hintergrund; span-tag hält der Pfeffer im hintergrund
4. Aktualisiert id="change" zu class="change". Es sei denn, Sie sind 100% sicher, dass Sie nur noch ein #element verändern, verwenden Sie eine Klasse. Dies ist ein reines styling-und es verhindert, dass Sie aus zwei Menü Listen auf der gleichen Seite.
5. Optimiert, CSS-styling, ein bisschen wie folgt:

Entfernt top-Polsterung und erhöht die Höhe. Also deine li-Elemente die gleiche Höhe, ABER dann Hinzugefügt line-height: 35px -> dies ist der beste Weg, um vertikal text zentrieren. Utlizing top-Polsterung funktioniert, aber es ist anfällig für schlechte browser-Inkonsistenzen.

Ändern li Elemente zu Wagen. Gefloateten Elemente sind die IE7-freundliche Methode! Sogar der IE6 wird nicht bug aus, aber ich habe nicht diese alte version zum testen Ihrer Webseite. FYI - ul.Menü haben overflow: hidden klar, das schwimmt.

position: relative; 
cursor: default;

Es sei denn, man verändert die Standardeinstellungen, können Sie halten diese zwei Eigenschaften aus. cursor sollte Standard sein. Position: relative ist unnötig - Sie sind nicht mit absoluter Positionierung oder irgendetwas, dass gewährleistet sein muss. Nun, Sie können diese in Ihrer Erklärung. Ich möchte nur code so "schlank" wie möglich.

abschließende Worte:

Werfen Sie einen Blick auf mein CSS. Beachten Sie, wie ich ul.menu alle meine Erklärung. Sie wollen sich in die Gewohnheit, die doign die gleichen; dies bietet dem Entwickler einen Einblick auf das, was der HTML aussieht und-noch wichtiger - Ihre css nicht bekommen overrided wenn Sie sich entscheiden, fügen Sie <div class=menu> später auf. Besonders .menu img würde gelten zu jedem image-tag innerhalb des Menü div.

Okay - das ist es. Lassen Sie mich wissen, wenn es irgendwelche clarfications.

FYI - zu sehen, wie diese Frage hat ein Kopfgeld, wenn Sie mir die hintergrund-Bilder kann ich polnische meinen code an Ihre Bedürfnisse 100% - vielleicht laden Sie Sie in ein edit deiner Antwort.

Dies ist seltsam, aber ich konnte neu das Problem in Firefox v22. Das wirklich seltsame daran war, dass in der jsFiddle wenn ich einfach auf "Aufräumen" und drücken Sie dann die "Run" und das problem war gelöst. Als Matthew R erwähnt dies ist wahrscheinlich aufgrund der zusätzlichen Leerraum entfernt wird.

Gebrochen:

Aufräumen, Ausführen und Feste

Hier ist eine Alternative Methode, bei der Hintergrundbilder:

Beispiel

.menu li {
  cursor: default;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
  list-style-type: none;
  position: relative;
  text-align: center;
  margin: 0 0 0 -25px;
  padding: 8px 0 0 10px;
  width: 118px;
  height: 20px;
  display: inline-block;
  background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png), url(http://i.stack.imgur.com/dmHl0.png);
  background-position: 0% 0%, 44% 75%;
  background-size: 128px, 18px;
  background-repeat: no-repeat;
  color: #0091c1;
}

.menu img {
  display: inline;
  vertical-align: -25%;
  padding-right: 6px;
}

#change:hover {
  background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png), url(http://www.chiletownhotsauce.com/images/stories/Red%20bell%20pepper.jpg);
  background-repeat: no-repeat;
  background-position: 0% 0%, 44% 75%;
  background-size: 128px, 18px;
}

<ul class="menu">
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li id="change">li</li>
  <li>li</li>
</ul>

Zur Behebung der (Darstellung der) das Problem zu beheben, ändern Sie die vertikale Ausrichtung der Icons im Menü enthalten sind:

.menu img {
    display: inline;
    vertical-align: top;
    margin-top: 2px;
    padding-right: 6px;
}

Auf den betroffenen Browser, das weitere Bild (mit display: none;) wurde die Veränderung der Höhe des enthaltenden Elements. Einstellung der <img> zu display: none; bedeutete, dass die display: inline; Einstellung nicht mehr angewendet und wurde in Position unter dem ersten Bild.

Nur mit den extra <img> Anzeige in-line-Updates der vertikalen Ausrichtung, aber offensichtlich nicht das Problem zu beheben, da das Bild muss versteckt werden, ohne ändern der position des Textes.

Dieses Update ändert die vertikale Ausrichtung von einem Prozentsatz (-25%) auf eine Feste position, wodurch keine (unechte) Unterschiede in der Höhe des enthaltenden Elements. Ich habe dann legen Sie den oberen Rand des Bildes, um den gewünschten Abstand vom oberen Rand des Elements.

Update

Dieses Update bricht die Anzeige im IE9 - gleiche Aussehen wie IE7 ohne dieses Update.