Das DIV-Layout ist anders, wenn ich die Anwendung vom Webserver im Gegensatz zum lokalen Entwicklungsserver ausführe

Question

Ich habe ein CSS-Problem. Meine DIVs sind Layout anders je nachdem, wenn ich meine Web-App vom Webserver gegenüber meinem lokalen VS2010 Entwicklungsserver ausführen.

Meine drei inneren DIVs (preButtons, navContainer, postButtons) werden alle inline angezeigt, wenn ich lokal ausgeführt, aber wenn ich veröffentlichen und von IIS 7.5 Webserver ausführen gibt es einen Zeilenumbruch nach jedem div.

Haben Sie eine Idee, was ich übersehe?

Hier ist der HTML-Code:

<style type="text/css">    
    div#pager div
    {
        display: inline-block;
    }

    #navContainer
    {
        width: 340px;
        height: 28px;                
        overflow: hidden;   
        position: relative;     
    }

    #reel
    {
        position: absolute;
        top: 0;
        left: 0;      
        width: 0;  
    }

</style>
<div id="pager" class="buttons">
    <div id="preButtons"></div>
    <div id="navContainer">
        <div id="reel">
        </div>
    </div>
    <div id="postButtons"></div>
</div>

UPDATE:

Hier ist ein Screenshot des Problems in Aktion. Der blaue Rahmen ist, weil ich die "Pager" div in IE-Entwickler-Tools ausgewählt haben.

UPDATE:

Letztendlich ging es mir um zwei Dinge.

Mein HTML- und CSS-Code musste wie angegeben bereinigt werden, aber auch meine Website wurde im Kompatibilitätsmodus geöffnet. Das lag daran, dass die Option "Intranet-Sites in der Kompatibilitätsansicht anzeigen" unter Extras --> Einstellungen für die Kompatibilitätsansicht positiv markiert war. Ich glaube, das wurde automatisch eingestellt, als mein Unternehmen den IE8 auf unseren Desktops einrichtete.

Vielen Dank für die Hilfe aller!

Answer 1

Hier können Sie Ihren Code stark vereinfachen. Nehmen Sie Ihre drei Divs und legen Sie sie in einen Container. Lassen Sie alle drei links schweben. Heben Sie den Float danach auf. Keine absolute Positionierung mehr erforderlich. Abgemacht.

Zum Beispiel: HTML:

<div class="container">
       <div class="floatleft"></div>
       <div class="floatleft"></div>
       <div class="floatleft"></div>
       <div class="clear"></div>
</div>

CSS:

.floatleft {
  float: left;
}

.clear {
  clear:both;
}

Als eine Nebenbemerkung, je nachdem, was Sie sind paging es könnte viel einfacher zu tun, ein Javascript Gitter wie DatenTabellen was die Notwendigkeit, dies zu tun, überflüssig machen würde....

Answer 2

Verwenden Sie einen css-Reset wie este am Anfang Ihres css.