Unten Code zeigt anders in Chrome und IE

<div class="wholediv"> 
     <div class="rightdiv"> 
     <strong>Your Company Name</strong><br /> 
     Evergreen Terrace 742<br /> 
     Kansas Missouri<br /> 
     Phone: 432-653-3121<br /> 
     [email protected] </div> 
     <div class="sitemap"> 
     <a href="#">Home</a>&nbsp;|&nbsp;<a href="#">Sitemap</a>&nbsp;|&nbsp;<a href="#">Contact Us</a></div> 
     </div> 
</div> 

    div div.wholediv 
{ 
height:97px; 
width:500px; 
float:left; 
background-color:#F0F0F0; 
} 
div div.sitemap 
{ 
    background-color:#F0F0F0; 
    position:relative; 
    float:right; 
    width:200px; 
    height:87px; 
    padding-right:10px; 
    padding-top:10px; 
    font: 0.7em Tahoma, sans-serif; 
font-weight:bold; 
} 
div div.rightdiv 
{ 
float:left; 
position:static; 
background-color:#F0F0F0; 
width:200px; 
height:87px; 
padding-left:10px; 
padding-top:10px; 
font: 0.7em Tahoma, sans-serif; 
}

IE zeigt dies wie folgt. alt text Chrome zeigt dies an. Unten Code zeigt anders in Chrome und IE

Quelle

2010-11-18 sly_Chandan

Dies ist besser als Ihre vorherige Frage, aber immer noch nicht sehr nützlich. Bitte poste entweder einen Live-Link (zu einem JSFiddle o.ä.) und/oder beschreibe das Problem detailliert *. Ansonsten müssen die Leute Ihren Code mühsam kopieren und einfügen - etwas, was die meisten nicht tun werden. –

Eine Beschreibung des Problems wäre hilfreich. Es wäre auch gut, wenn Sie eine Beispielseite anzeigen könnten, da das Problem möglicherweise nicht vollständig von diesem kleinen Ausschnitt abhängt (z. B. umgebende Elemente oder kaskadierende Stile könnten dazu beitragen). – akamike

Sie haben ein Element auf Blockebene, das sowohl eine Breite als auch ein Padding aufweist. Das ist zumindest eine Sache, die wegen des unterschiedlichen Box-Modells Probleme in IE verursachen wird.

Mehr Infos über Box-Modelle: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

bearbeiten, nachdem Sie die Bilder hinzugefügt: atleast Position: statische & position: relative sollte hier nicht die Art und Weise benötigt werden Sie mit ihnen. Sie könnten mit dem Debuggen beginnen, indem Sie das Padding von den Elementen entfernen. Padding ist wahrscheinlich die Sache in IE, die die "Sitemap" -Aufreißen.

Sie fügen den Code, der das Logo-Bild usw. enthält, nicht in den Code ein, so dass Sie diesen Teil nicht kommentieren können. Ich denke, du solltest über die Box-Modelle lesen und das anwenden. Auch die Art und Weise, in der die Position verwendet wird, sieht ziemlich zufällig aus, so dass Sie das ein wenig studieren könnten. Weitere Informationen über Positionierung in http://www.quirksmode.org/css/position.html

Quelle

2010-11-18 10:45:49 Marcus

Wird DreamWeaver CS8 mein Problem lösen? Hat es Browser-Kompatibilitätsprüfungen? –

Selbst Adobe hat das noch nicht in der Zukunft vorausgesagt ... – BoltClock

@Chandan Khatwani loswerden von Dreamweaver, lernen, wie man HTML selbst schreibt. –

Unten Code zeigt anders in Chrome und IE

Antwort

Verwandte Themen