Wie Absolute Positionierung in IE8 beheben?

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

Frage

In jedem Browser die ich verwendet habe, außer ie8, ein absolut positioniertes Element mit relativer Positionierung nach dem nächsten übergeordneten positioniert werden.

Der Code unten zeigt zwei divs innerhalb einer Tabelle. Die obere div hat Position. Relativ, aber die verschachtelte, absolut positionierte Element nicht respektiert seine Grenzen (in IE8, es am unteren Rand der Seite statt der Unterseite des übergeordneten div positioniert wird)

Weiß jemand, ein Update für das? 

<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
  <tr>
    <td><div id="top"> Div with id="top"
        <div id="position_me"> Div with id="position me" </div>
      </div>
      <div id="bottom"> Div with id="bottom"
        <p>Lorem ipsum dolor sit amet.</p>
      </div></td>
  </tr>
</table>
War es hilfreich?

Lösung

Deklarieren Sie eine Doctype. Ich würde empfehlen Ihnen, die HTML5 Doctype zu verwenden: 

<!DOCTYPE html>

Andere Tipps

Fügen Sie diese: 

#top {
//height: 100%;
}
#position_me {
//left: 0;
}

Es zwingt IE8 Rechen Position korrekt in Quirks-Modus. Es gibt viele Möglichkeiten, es zu bekommen: 

//zoom: 1;
//writing-mode: tb-rl;

Siehe http://haslayout.net/haslayout

Das ist becuase Sie nicht den Dokumenttyp verwenden. Und IE arbeiten im "quircks" -Modus .

Versuchen Sie, diese Doctype: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Id immer das HTML5 Doctype verwenden, aber in meinem Fall das einzige Problem war, dass das Mutterelement benötigte „position: relative;“ speziell eingestellt. Danach war es völlig in Ordnung.

Sie können auch verwenden 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dieses feste mein Problem!

Microsoft sagt:

  

In den meisten Fällen empfehlen wir, dass Websites, die HTML5-Dokumenttyp verwenden   die größte Vielfalt von etablierten und aufstrebenden Standards zu unterstützen,   sowie die breiteste Palette von Web-Browsern. Dieses Beispiel zeigt, wie   HTML5-Dokumenttyp angeben.

Für mehr Info

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