Impossibile far funzionare il galleggiante a sinistra / a destra per un div in Internet Explorer

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

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.

È stato utile?

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:

  1. 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à;
  2. 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;
  3. 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;
  4. 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 ..

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