У меня есть следующая тестовая страница HTML:
<!DOCTYPE html>
<html>
<head>
<title>Position Break</title>
<style type="text/css">
section {
position: relative;
width: 100%
}
li {
display: inline;
}
#list_two {
position: absolute;
top:0;
width:100%;
}
</style>
</head>
<body>
<section>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</section>
<section>
<ul id="list_two">
<li>Item One</li>
<li>Item Two</li>
</ul>
</section>
</body>
</html>
(для меня) ожидаемый результат которого:
Item One Item Two
Item One Item Two
т.е. Оба списка должны отображаться в строке. Это наблюдаемый вывод в Chrome (8) и Safari (5.0.3), но и Opera (10.10), и Firefox (3.6) выдают неожиданный вывод:
Item One Item Two
Item
One
Item
Two
Я попытался расположить содержащий элемент section вместо ul. Я пытался назначить явные значения ширины и высоты на каждом шаге вверх по DOM, но безрезультатно - я не могу найти комбинацию, которая получит поведение Chrome / Safari в Firefox / Opera. Как это сделано?
ТИА!