悩んでいるので、どなたか教えていただけると嬉しいです。
position:absoluteの縦位置がIEのみずれて表示されてしまいます。
他ブラウザでは問題なく表示されるのですが、IEだと少し上?にずれてしまうようです。
検索で見つけた親要素にwidth:100%を付ける…などの対策方法では直りませんでした。
absoluteで設置しようとしている部分にはjqueryのカルーセルを入れています。
http://jqueryfordesigners.com/jquery-infinite-carousel/
宜しくお願いします!
【html】
<div class="check">
<div id="viewport">
<ul>
<li><a href="#"><img src="images/check/1.jpg" alt="1" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/2.jpg" alt="2" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/3.jpg" alt="3" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/4.jpg" alt="4" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/5.jpg" alt="5" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/6.jpg" alt="6" width="100" height="100" /></a></li>
</ul>
</div>
</div>
【css】
#viewport{
position: absolute;
top: 30px;
left: 80px;
width: 690px; /* Defines the size of the visible part of the carousel
Attention : if you only want to see plain items in the viewport,
the width of the viewport should take into account of :
- the items width
- the right and left padding of items
- the number of items you want to see in the viewport
*/
overflow:hidden; /* Hides extra elements, those outside the viewport area */
/* Fix for IE */
}
#viewport ul{
position: relative; /* Enables positionning of elements inside viewport */
padding: 0; /* Resets default - User Agent - style */
margin: 0;
}
#viewport li{
width: 100px; /* Defines the size of inner element */
height: 100px;
float: left; /* Places list items side by side*/
list-style: none; /* Resets default - User Agent - style */
/* Cosmetic */
margin: 0 1px;
padding: 10px 7px;
text-align:center;
}
/* Cosmetic */
#simplePrevious, #simpleNext{
cursor: pointer;
font-size: 0.8em;
text-decoration: underline;
}
div.check {
position: relative;
width: 842px;
height: 189px;
margin: 0 auto;
}
悩んでいるので、どなたか教えていただけると嬉しいです。
position:absoluteの縦位置がIEのみずれて表示されてしまいます。
他ブラウザでは問題なく表示されるのですが、IEだと少し上?にずれてしまうようです。
検索で見つけた親要素にwidth:100%を付ける…などの対策方法では直りませんでした。
absoluteで設置しようとしている部分にはjqueryのカルーセルを入れています。
http://jqueryfordesigners.com/jquery-infinite-carousel/
宜しくお願いします!
【html】
<div class="check">
<div id="viewport">
<ul>
<li><a href="#"><img src="images/check/1.jpg" alt="1" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/2.jpg" alt="2" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/3.jpg" alt="3" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/4.jpg" alt="4" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/5.jpg" alt="5" width="100" height="100" /></a></li>
<li><a href="#"><img src="images/check/6.jpg" alt="6" width="100" height="100" /></a></li>
</ul>
</div>
</div>
【css】
#viewport{
position: absolute;
top: 30px;
left: 80px;
width: 690px; /* Defines the size of the visible part of the carousel
Attention : if you only want to see plain items in the viewport,
the width of the viewport should take into account of :
- the items width
- the right and left padding of items
- the number of items you want to see in the viewport
*/
overflow:hidden; /* Hides extra elements, those outside the viewport area */
/* Fix for IE */
}
#viewport ul{
position: relative; /* Enables positionning of elements inside viewport */
padding: 0; /* Resets default - User Agent - style */
margin: 0;
}
#viewport li{
width: 100px; /* Defines the size of inner element */
height: 100px;
float: left; /* Places list items side by side*/
list-style: none; /* Resets default - User Agent - style */
/* Cosmetic */
margin: 0 1px;
padding: 10px 7px;
text-align:center;
}
/* Cosmetic */
#simplePrevious, #simpleNext{
cursor: pointer;
font-size: 0.8em;
text-decoration: underline;
}
div.check {
position: relative;
width: 842px;
height: 189px;
margin: 0 auto;
}