flotteur simple CSS gauche problème en mode de compatibilité IE

StackOverflow https://stackoverflow.com/questions/4792859

Question

Je suis en train d'obtenir deux boîtes côte à côte (A 200px menu de gauche, et à côté de lui à 100% largeur restante principale zone de contenu).

Il fonctionne très bien dans tous les navigateurs, mais beaucoup de nos clients utilisent IE6 (rien que nous pouvons faire à ce sujet unfortunatly), donc cela doit prendre en charge le mode IE de compatibilité. Malheureusement, cette simple CSS ne fonctionne pas! aider quelqu'un peut me sans me avoir besoin de recourir de nouveau aux tables?

CSS pertinent: 

.clear {
    clear:both;
}

/* Left menu */
.leftMenu{
    width: 200px;
    border:1px solid green;
    height:100px;
    float:left;
}

/* Main Content area */
.mainBox{
    width:100%;
    border:1px solid red;
}
.mainWrapper{
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>



</title><link rel="stylesheet" type="text/css" href="css/default.css" /></head>



<body>

    <form name="form1" method="post" action="default.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIwNjAyODU4M2Rk5phxJ78Kc9Kf0nXvcJ7j7tQJPxw=" />

</div>

    <div class="mainWrapper">

        <div class="leftMenu">

        left

        </div>

        <div class="mainBox">

        main

        </div>

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

    </div>



    </form>

</body>

</html>
Était-ce utile?

La solution

Ne pas IE6 peut pas tester, mais de toute façon. Essayez de retirer width: 100% de .mainBox et également supprimer toutes les frontières et d'utiliser plutôt la couleur d'arrière-plan pour les tests. J'ai eu à travailler dans les normes IE7 cette façon.

.mainBox est un DIV qui n'a pas de flotteurs il est donc implicitement 100% de large. Aussi les frontières Ajouter à la largeur pourrait provoquer un comportement inattendu lors du test.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top