Ошибка рендеринга в браузере Opera: вертикальное переполнение и абсолютное позиционирование. Кто-нибудь знает обходной путь?

Question

Я пытаюсь обойти то, что похоже на ошибку в Opera.

Нежелательное поведение заключается в том, что опера помещает ненужную вертикальную полосу прокрутки в окне браузера.

Это происходит, когда у меня есть внешний div, который является position: относительным и имеет overflow-y:auto, и вложенный внутренний div, который является position:absolute и, оказывается, выше, чем высота окна браузера.

например:

<style type="text/css">
    #outer {
        position: relative; 
        overflow-y: auto; 
        width: 200px; 
        height: 200px;
    }

    #inner {
        position: absolute; 
        height: 2000px; 
        width: 50%; 
        border: 2px dashed blue;
        background: deeppink;
    }
</style>

<div id="outer">
    <div id="inner">Inner</div>
</div>

Вот демо:

http://www.jaysweeney.com.au/overflow_issue.html

Интересно, что, как видно из приведенной выше демонстрации, эта проблема не возникает при горизонтальном переполнении.

Вот скриншот того, что я вижу в Opera:

http://www.jaysweeney.com.au/screen.png

Я использую Opera 11.01 на OS X.

Если кто-нибудь знает решение этой проблемы, пожалуйста, дайте мне знать. На данный момент я в тупике, и это слишком много работы, чтобы изменить мою разметку и JavaScript, чтобы не использовать абсолютное позиционирование.

Заранее спасибо,

Джей.

Answer 1

Похоже, действительно, это своего рода ошибка.

Единственный способ обойти это - полностью отключить вертикальную полосу прокрутки в окне браузера, используя body {overflow-y: hidden;}

Однако, возможно, это слишком радикальная мера...