четверг, 22 апреля 2010 г.

Про overflow:hidden в Internet Explorer

Internet Explorer очень загадочно ведет себя с overflow: hidden и position: relative.

Допустим, у вас есть следующее DOM-дерево:
  <div style="height: 80px; overflow: hidden; width: 200px;">
    <div style="position: relative; width: 2000px;">
      content
    </div>
  </div>


С помощью этого кода получается отличный слайдер. Но! Он заставляет IE6/7 в ужасе вылетать.

Далее под катом
Получилось найти несколько решений:
<div style="height: 80px; overflow: hidden; width: 100%;">
  <div style="position: relative; width: 2000px;">
    content
  </div>
</div> 
 
<div style="height: 80px; overflow: hidden; width: 200px; position: relative; ">
  <div style="position: absolute; top: 0; left: 0; width: 2000px;">
    content
  </div>
</div> 

Второй вариант мне подошел больше, т.к. мне так или иначе пришлось двигать внутренний блок.

Комментариев нет:

Отправить комментарий