CSS semplice galleggiante lasciato problema in modalità compatibilità IE

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

Domanda

Sto cercando di ottenere lato due scatole a fianco (A 200px menu di sinistra, e accanto ad essa un 100% restante larghezza dell'area di contenuto principale).

Funziona bene in tutti i browser, ma un sacco di nostri clienti utilizzano IE6 (niente che possiamo fare a questo proposito purtroppo), quindi questo deve supportare la modalità di compatibilità di IE. Purtroppo, questa semplice CSS non funziona! Chiunque può aiutare me senza bisogno di ricorrere di nuovo alle tabelle?

Rilevante CSS: 

.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>
È stato utile?

Soluzione

Non hai ancora IE6 quindi non può di prova, ma in ogni caso. Provare a rimuovere width: 100% da .mainBox e rimuovere anche tutte le frontiere e di utilizzare invece il colore di sfondo per il test. Ho preso a lavorare in standard IE7 quel modo.

.mainBox è un DIV che non ha nessun galleggia quindi è implicitamente al 100% di larghezza. Anche i confini Aggiungi per la larghezza in modo può causare un comportamento imprevisto durante il test.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top