Não é possível obter flutuador esquerdo / direito ao trabalho para uma div no Internet Explorer

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

Pergunta

Aqui está o 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;
}

Esta multa funciona no FF e Chrome. Deve haver duas colunas um com texto e um com um ícone e uma pequena quantidade de texto. Como posso fazer este trabalho no IE? Eu tentei o div clear = ambos coisa e que não está fazendo nada.

Além disso upvotes para quem pode me dar algumas dicas sobre como escrever páginas e estilos de uso que funcionam em FF, Chrome e IE> = 7.

Foi útil?

Solução

poderia ser porque você não está definindo um doctype e IE está vendo sua página em Quirksmode como appose para o modo Standards (ou quase padrão).

Leia este artigo para saber mais:

http://www.quirksmode.org/css/quirksmode.html

Eu verifiquei o seu site no modo de padrões e no IE7 se comportam 2 coluna como deveriam (como no FF & Chrome)

Outras dicas

Eu pode sugerir várias coisas, embora eu não tenho certeza que vai ajudar se de fato algum deles irá:

  1. Coloque um DOCTYPE (por exemplo, HTML Transitional 4.01) em seu documento. Este modo de forças IE em chamados "compatível com os padrões" ao invés do eufemístico "peculiaridades" mode;
  2. Não reutilizar as classes esquerda e direita assim. Obriga-nos a usar o seletor filho que é apenas IE7 + e não há necessidade para isso;
  3. Se o seu div contém nada, mas flutua terá 0 altura. Você pode resolver isso colocando uma div 0 altura abaixo-los com "clear: both" nele ou "overflow: hidden" no pai;
  4. Se livrar de align = "center". Isso não é padrão.

Aqui está um esqueleto considerar o uso de: 

<div id="container">
  <div id="left">Text</div>
  <div id="right">
    <div id="icon">(image)</div>
    <div id="text">(text)</div>
  </div>
</div>

combinado com: 

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 assim por diante.

Em primeiro lugar eu tinha ignorado todos 

div#main-header-content > div.left

e substituir com 

div#main-header-content div.left

como eles não funcionam no IE6.

Em segundo lugar, eu uso 

div.right {
    float: left;
}

E adicionalmente, eu definitivamente pular <div align="center">...</div>, como é obsoleto. Em vez disso eu iria reorganizar div.content para 

div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}

O truque de centro é a (usando posição: relativa ou posição: absoluta) definir o ponto de esquerda para a metade da largura, e em seguida, mover a parte de trás da margem a metade da largura do elemento (em que o 'elemento' é o elemento você quer centro).

css modificado 

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;
    }

Em vez de ur css para estes classe u tentar fazer isso muito bem funciona no IE e Firefox também ..

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top