Padding nicht einmal in IE

Question

Wenn Sie den folgenden Code in eine test.html einfügen und mit Firefox durchsuchen, ist es in Ordnung. Aber wenn Sie mit dem IE surfen, können Sie sehen, dass es mehr Platz rechts von <a> Elementen sind .:

<style> 
li { 
    display:inline; 
    margin:0 90px; 
    padding:6px 12px; 
    background:#777777 none repeat scroll 0 0; 
} 



li a { 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
} 
</style> 


<div id="tabs"> 
    <div class="nav"> 
     <ul> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
     </ul> 
    </div> 
</div> 

EDIT: Wie man den Text auch im Internet Explorer machen?

Answer 1

Um Ihre Frage zu beantworten, einfach: Legen Sie alle Ihre li Elemente auf einer einzelnen Zeile oder sie schweben.

Answer 2

Ich schaute auf Ihre Quelle und versuchte es für mich selbst.

In Firefox 3.0.11 und Internet Explorer 8 zeigte ich ziemlich identische Seiten.

Eine Sache, die ich sagen kann ist, dass die Seiten anfangs unterschiedlich aussahen, weil meine Browser unterschiedliche Breiten hatten, aber nicht das Randproblem, das Sie hatten. In meinem Fall hat die Größenanpassung des Browsers funktioniert.

Aber das Problem, das Sie haben, ist üblich. Der Internet Explorer zeigt fast immer andere Seiten an, als ein Browser, der normalerweise standardkonform ist. Eine Möglichkeit, die Leute gefunden haben, um dies zu umgehen (und das könnte Ihr Problem sehr gut lösen), besteht darin, ein CSS-Reset-Blatt zu verwenden.

Einige guten sind:

• Eric Meyer's Reset CSS
• Yahoo! YUI Reset CSS

Answer 3

Das Problem zwischen den Browsern, wo das CSS-Box-Modell entscheidet eine unglückliche Meinungsverschiedenheit ist das, was über die Polsterung zu tun:

• IE verringert den Speicherplatz für den Inhalt innerhalb eines div Wenn Sie das Padding erhöhen, so halten Sie die Div-Größe die gleiche
• Firefox erhöht die div-Größe mit der Auffüllung, halten Sie die Inhaltsgröße gleich.

Answer 4

Getestet in IE6 scheint es, den Anker-Tags einen zusätzlichen Platz hinzuzufügen. Kopieren Sie es und fügen Sie es ein und Sie werden es selbst sehen. Firefox fügt den zusätzlichen Speicherplatz nicht hinzu.

Sie können den Rand für IE ändern, wenn Sie möchten. Es ist keine perfekte Lösung, aber es kann Ihnen helfen, die Registerkarten ähnlich aussehen zu lassen. Wenn Sie möchten, dass es in allen Browsern identisch ist, können Sie stattdessen immer ein Bild verwenden. Aber versuchen Sie dies:

li a { 
color:#FFFFFF; 
text-decoration:none; 
font-weight:bold; 
} 

*html li a { 
color:#FFFFFF; 
text-decoration:none; 
font-weight:bold; 
margin-right:-3px; 
} 

*+html li a { 
color:#FFFFFF; 
text-decoration:none; 
font-weight:bold; 
margin-right:-3px; 
}