Hallo zusammen,
ich entwickle gerade ein Konstrukt, bei dem ein Container innerhalb eines äußeren Containers per javascript bewegt werden kann. Der innere Container enthält noch weitere gefloatete container mit overflow: auto. Das overflow auto hier ist wichtig, darauf kann ich auf keinen Fall verzichten. Leider scheint dieses overflow auto auch dafür verantwortlich zu sein, dass der Firefox (relevant sind die Versionen 2 und 3) üble Darstellungsfehler produziert.
Ich habe das Szenario in einem Testcase verdeutlicht (bitte auf Firefox 2 und/oder 3 mit Javascript testen).
Kann mir jemand einen Workaround für dieses Problem vorschlagen?
Es handelt sich eindeutig um einen Browser-Bug (
https://bugzilla.mozilla.org/show_bug.cgi?id=374675).
Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Overflow related display bug</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<style type="text/css">
div#other
{
position: absolute;
left: 0;
top: 100px;
width: 120px;
}
div#outer
{
position: absolute;
left: 121px;
top: 100px;
width: 300px;
height: 100px;
border: 2px solid red;
overflow: hidden;
}
div#inner
{
overflow: hidden;
width: 6000px;
}
div.content
{
float: left;
margin-left: 10px;
width: 100px;
heigth: 100px;
background: green;
overflow: auto;
}
div.content p
{
padding: 2px;
color: white;
}
</style>
</head>
<body>
<!-- script to move the inner container-->
<script type="text/javascript">
function moveContent(offset){
$("div#inner").stop().animate(
{ marginLeft: parseInt($("div#inner").css("margin-left"))+offset+"px"},
{
duration: 200
}
);
}
</script>
<p><a href="javascript:moveContent(-20);">Scroll left</a> | <a href="javascript:moveContent(20);">Scroll right</a></p>
<div id="other">
<p>
Aenean vel mi. Donec blandit mauris convallis lacus. Sed a urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus hendrerit. Curabitur libero leo, laoreet nec, lobortis in, auctor malesuada, metus. Vivamus ultrices eros eget pede. Morbi facilisis leo ut elit. Fusce viverra iaculis risus. Pellentesque posuere faucibus sem. Praesent et felis ac lorem laoreet venenatis.
</p>
</div>
<div id="outer">
<div id="inner">
<div class="content">
<p>1. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>
</div>
<div class="content">
<p>2. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>
</div>
<div class="content">
<p>3. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>
</div>
<div class="content">
<p>4. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>
</div>
</div>
</div>
</body>
</html>
05.08.2008, 12:40
Firefox display bug: overflow und javascript
Ähnliche Themen
Linear-Darstellung
