IE7 overflow:scroll 렌더링 이슈

마크업

<div class="container">
    <ul class="scroller">
        <li class="list">11111111</li>
        <li class="list">22222222</li>
        <li class="list">33333333</li>
        <li class="list">44444444</li>
        <li class="list">55555555</li>
        <li class="list">66666666</li>
        <li class="list">77777777</li>
        <li class="list">88888888</li>
        <li class="list">99999999</li>
        <li class="list">00000000</li>
    </ul>
</div>

<li> 태그에 position: relative 속성 있을 때

.container {
    width: 200px;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid #ccc;
}
.list {
    position: relative;
    padding: 5px 0;
}

<li> 태그에 position: relative 속성 없을 때

.container {
    width: 200px;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid #ccc;
}
.list {
    padding: 5px 0;
}