Kann nicht Schwimmer / rechts sich gelassen zu bekommen für ein div in Internet Explorer zu arbeiten

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

Frage

Hier ist der 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>

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

Das funktioniert in FF und Chrome in Ordnung. Es sollte zwei Spalten eines mit Text und einem mit einem Symbol und einer geringen Menge an Text sein. Wie kann ich diese Arbeit in IE machen? Ich versuchte, die div clear = beide Sache, und das ist nichts zu tun.

upvotes auch für jeden, den mir ein paar Tipps geben kann, wie Seiten und die Verwendung von Design zu schreiben, die über FF, Chrome und IE arbeiten> = 7.

War es hilfreich?

Lösung

könnte sein, weil Ihr nicht ein Doctype Definition und IE ist die Anzeige Ihrer Seite in Quirksmode als appose zu Standard-Modus (oder fast Standard).

Lesen Sie diesen Artikel, um mehr zu finden:

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

Ich habe Ihre Seite im Standardmodus und in IE7 die 2-Säule verhalten, wie sie sollen (wie in FF & Chrome) geprüft

Andere Tipps

Ich kann einige Dinge vorschlagen, obwohl ich nicht sicher bin, was, wenn in der Tat einer von ihnen helfen wird:

  1. Legen Sie eine DOCTYPE (zB Transitional HTML 4.01) auf Ihrem Dokument. Dies zwingt IE in sogenannten „standardkonforme“ Modus statt den euphemistischen „Macken“ -Modus;
  2. Sie die linken und rechten Klassen wie die nicht wiederverwendet werden. Es zwingt Sie, das Kind Wähler zu verwenden, die nur IE7 + ist und es gibt keine Notwendigkeit für sie;
  3. Wenn Ihr div enthält nichts anderes als schwimmt es 0 Höhe haben wird. Sie können dies, indem es eine 0 Höhe div unter ihnen mit dem Setzen „clear: both“ an oder „overflow: hidden“ auf dem übergeordneten;
  4. Sie sich von align = "center" los zu werden. Das ist nicht Standard.

Hier ist ein Skelett zu prüfen, mit: 

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

kombiniert mit: 

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

und so weiter.

Zuerst würde ich übersprungen alle 

div#main-header-content > div.left

und ersetzen Sie mit 

div#main-header-content div.left

wie sie funktionieren nicht in IE6.

Zweitens würde ich verwenden 

div.right {
    float: left;
}

Und Additionaly, würde ich auf jeden Fall <div align="center">...</div> überspringen, da es veraltet ist. Stattdessen würde ich neu anordnen div.content zu 

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

Der Trick zum Zentrum ist (mit Position: relative oder Position: absolut) den linken Punkt auf der Hälfte der Breite eingestellt und dann die Marge auf der Hälfte der Elementbreite zurückbewegen (wobei das ‚Element‘ ist das Element Sie wollen Mitte).

modifizierte CSS 

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

Statt ur CSS für diese Klasse u versuchen, dies in IE und Firefox auch gut funktioniert ..

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top