IE-Bug: Markieren von Text in absolutem <div>, CSS1Compat [Re:]
ThomasLa
- browser
Im IE kann man Fließtext nicht ordentlich markieren, wenn er in einem absolut positionierten <div> steht und der IE im standardkonformen Modus läuft, siehe:
http://forum.de.selfhtml.org/archiv/2006/7/t133759/
Dort hat mir Axel Richter auch den Tipp gegeben, dass "unter" diesem <div> noch ein Element liegen muss, z.B. <body> mit Höhe 100%. Das funktioniert zwar auf der ersten Bildschirmseite (100% eben ;-) aber weiter unten nicht mehr.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body style="height:100%;">
<div style="position:absolute;">
<p>Ullamco laboris nisi velit esse cillum dolore cupidatat non proident. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, mollit anim id est laborum. Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p>
<p>Cupidatat non proident, quis nostrud exercitation velit esse cillum dolore. Sunt in culpa eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Quis nostrud exercitation velit esse cillum dolore ut enim ad minim veniam. Lorem ipsum dolor sit amet, duis aute irure dolor ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt qui officia deserunt excepteur sint occaecat.</p>
<p>In reprehenderit in voluptate lorem ipsum dolor sit amet, ut enim ad minim veniam. Quis nostrud exercitation qui officia deserunt. Lorem ipsum dolor sit amet, ut enim ad minim veniam, eu fugiat nulla pariatur.</p>
<p>Ut labore et dolore magna aliqua. Consectetur adipisicing elit, qui officia deserunt in reprehenderit in voluptate. Velit esse cillum dolore excepteur sint occaecat ullamco laboris nisi.</p>
<p>Sed do eiusmod tempor incididunt cupidatat non proident, consectetur adipisicing elit. Velit esse cillum dolore lorem ipsum dolor sit amet, ut enim ad minim veniam. Mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt quis nostrud exercitation consectetur adipisicing elit.</p>
<p>Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat sed do eiusmod tempor incididunt mollit anim id est laborum. Quis nostrud exercitation velit esse cillum dolore ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate qui officia deserunt.</p>
<p>Ullamco laboris nisi quis nostrud exercitation. Quis nostrud exercitation ut enim ad minim veniam, cupidatat non proident. Velit esse cillum dolore sunt in culpa qui officia deserunt. Duis aute irure dolor ullamco laboris nisi lorem ipsum dolor sit amet. Mollit anim id est laborum.</p>
<p>Eu fugiat nulla pariatur. Consectetur adipisicing elit, duis aute irure dolor sed do eiusmod tempor incididunt. Quis nostrud exercitation cupidatat non proident, ullamco laboris nisi. Lorem ipsum dolor sit amet, velit esse cillum dolore consectetur adipisicing elit.</p>
<p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Quis nostrud exercitation duis aute irure dolor ut enim ad minim veniam. Ullamco laboris nisi eu fugiat nulla pariatur. Qui officia deserunt cupidatat non proident, velit esse cillum dolore. Lorem ipsum dolor sit amet, excepteur sint occaecat mollit anim id est laborum.</p>
<p>Sunt in culpa. Duis aute irure dolor ut enim ad minim veniam, excepteur sint occaecat. In reprehenderit in voluptate lorem ipsum dolor sit amet, ullamco laboris nisi. Velit esse cillum dolore ut aliquip ex ea commodo consequat.</p>
<p>Eu fugiat nulla pariatur. Sunt in culpa excepteur sint occaecat mollit anim id est laborum. Cupidatat non proident, ut enim ad minim veniam, lorem ipsum dolor sit amet. Velit esse cillum dolore consectetur adipisicing elit. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p>
<p>Excepteur sint occaecat duis aute irure dolor in reprehenderit in voluptate. Qui officia deserunt ut aliquip ex ea commodo consequat. Mollit anim id est laborum. Sed do eiusmod tempor incididunt duis aute irure dolor consectetur adipisicing elit. Ullamco laboris nisi ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
Bitte das IE-Fenster soweit verkleinern, dass nicht alles hineinpasst. Dann neu laden, und von oben beginnend alles markieren (mit der Maus). Über die untere Bildschirmgrenze hinaus geht's nicht!
Weiß da jemand was dazu??
Was ich schon herausgefunden habe:
*) Bei Höhe 300% funktioniert zwar das Markieren, aber das Dokument wird nach unten unnötig verlängert.
*) Axel Richter's Erklärung "Ja, es funktioniert solange nicht richtig, wie das absolut positionierte Element mit dem Text drin quasi über dem leeren absoluten Nichts schwebt." scheint auch nicht ganz zu stimmen (oder verstehe ich sie falsch): Wenn man um das <div> nämlich noch ein <div> legt, bringt das auch nichts.
Danke!!
Hallo Thomas
... <body> mit Höhe 100%. Das funktioniert zwar auf der ersten Bildschirmseite (100% eben ;-) aber weiter unten nicht mehr.
Genau, dort sich ja auch die 100% der Höhe des Viewports zu ende.
Was ich schon herausgefunden habe:
*) Bei Höhe 300% funktioniert zwar das Markieren, aber das Dokument wird nach unten unnötig verlängert.
Damit erhält dein body die dreifache Höhe und genau so weit reicht das Dokument dann, und genau so weit wird dann auch das Markieren funktionieren.
*) Axel Richter's Erklärung "Ja, es funktioniert solange nicht richtig, wie das absolut positionierte Element mit dem Text drin quasi über dem leeren absoluten Nichts schwebt." scheint auch nicht ganz zu stimmen (oder verstehe ich sie falsch): Wenn man um das <div> nämlich noch ein <div> legt, bringt das auch nichts.
Wieso sollte dein absolut positioniertes Element dadurch nicht mehr über dem absoluten Nichts schweben?
Durch die absolute Positionierung nimmst du das Element aus dem Elementfluss, du hast es damit praktisch aus der Seite entfernt und anschließend an der von dir angegebenen Position wieder drübergeklebt.
Es hat damit keinerlei Einfluss mehr auf die Größe irgendeines übergeordneten Elements, weder auf body noch auch irgendein Div.
Warum hast du das überhaupt gemacht?
Auf Wiederlesen
Detlef
Warum hast du das überhaupt gemacht?
Diese Frage hab ich befürchtet! ;-)
Ich hab's jetzt tatsächlich geändert, und den <div> einfach mit margin/padding dorthin manövriert, wo er sein soll.
Mein persönliches Problem hab ich dadurch gelöst, aber das grundsätzliche Problem, dass man im IE in absoluten <div>'s nicht gescheit markieren kann, bleibt :-(
Danke!!