Impossibile far funzionare il galleggiante a sinistra / a destra per un div in Internet Explorer
-
22-07-2019 - |
Domanda
Ecco l'html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title></title>
</head>
<body>
<div align="center">
<div id="main-header-content" class="content">
<div class="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
</div>
<div class="right">
<div class="left">
<img src="http://www.mywebk9.com/images/question.png" alt="Questions"/>
</div>
<div class="right">
<span class="small-text">Lorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</body>
</html>
e styles.css:
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Verdana;
font-size: 8pt;
}
div.content
{
width: 585px;
}
div#header-content div
{
padding: 20px;
text-align: justify;
}
div#main-header-content > div.left
{
padding-left: 40px;
padding-right: 7px;
text-align: justify;
width: 350px;
}
div#main-header-content > div.right
{
padding-left: 7px;
padding-right: 15px;
width: 165px;
}
div#main-header-content div.right div.left
{
width: 20px;
}
div#main-header-content div.right div.right
{
text-align: left;
width: 142px;
}
div.left
{
float: left;
}
div.right
{
float: right;
}
.small-text
{
font-size: smaller;
}
Funziona bene in FF e Chrome. Dovrebbe essere due colonne una con il testo e una con un'icona e una piccola quantità di testo. Come posso farlo funzionare in IE? Ho provato il div clear = entrambe le cose e che non sta facendo nulla.
Anche voti positivi per chiunque possa darmi alcuni consigli su come scrivere pagine e usare stili che funzionano su FF, Chrome e IE > = 7.
Soluzione
potrebbe essere perché non stai definendo un tipo di documento e IE sta visualizzando la tua pagina in modalità Quirks come in apposizione alla modalità Standard (o quasi Standard).
Leggi questo articolo per saperne di più:
http://www.quirksmode.org/css/quirksmode.html
Ho controllato il tuo sito in modalità standard e in IE7 la colonna 2 si comporta come dovrebbe (come in FF & amp; Chrome)
Altri suggerimenti
Posso suggerire diverse cose, anche se non sono sicuro di chi aiuterà se davvero qualcuno di loro:
- Inserisci un DOCTYPE (ad esempio HTML 4.01 di transizione) sul tuo documento. Questo costringe IE a quotare & Quot; conforme agli standard & Quot; mode piuttosto che l'eufemistico " quirks " modalità;
- Non riutilizzare le classi sinistra e destra in quel modo. Ti costringe a usare il selettore figlio che è solo IE7 + e non ce n'è bisogno;
- Se il tuo div non contiene altro che float, avrà 0 altezza. Puoi risolverlo mettendo un div di 0 altezza sotto di loro con & Quot; clear: entrambi & Quot; su di esso o " overflow: nascosto " sul genitore;
- Sbarazzarsi di align = " center " ;. Non è standard.
Ecco uno scheletro da considerare usando:
<div id="container">
<div id="left">Text</div>
<div id="right">
<div id="icon">(image)</div>
<div id="text">(text)</div>
</div>
</div>
combinato con:
html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */
#left { text-align: justify; width: 350px; float: left; }
#right { width: 235px; float: right; overflow: hidden; }
#icon { float: left; width: 20px; }
#text { float: right; width: 142px; }
e così via.
Prima ho saltato tutto
div#main-header-content > div.left
e sostituisci con
div#main-header-content div.left
poiché non funzionano in IE6.
In secondo luogo, userei
div.right {
float: left;
}
E inoltre, salterei sicuramente <div align="center">...</div>
, poiché è deprecato. Invece riorganizzerei div.content in
div.content {
position: relative;
width: 585px;
margin-left: -292px
left: 50%;
}
Il trucco da centrare è (usando position: relative o position: absolute) impostare il punto sinistro a metà della larghezza, quindi spostare il margine indietro alla metà della larghezza dell'elemento (dove "elemento" è l'elemento vuoi centrare).
css modificato
div#main-header-content div.left
{
padding-left: 40px;
padding-right: 7px;
text-align: justify;
width: 350px;
}
div#main-header-content div.right
{
padding-left: 7px;
padding-right: 15px;
width: 165px;
}
Invece di ur css per questa classe, prova che funziona bene anche su IE e Firefox ..