absoluteの縦位置がIEでずれる

質問

悩んでいるので、どなたか教えていただけると嬉しいです。

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;
}

回答No.2

kiyoto-777 · ベストアンサー

CSSには指定したブラウザにしか効かなCSSハックという
ものがあります。

下記の様にCSSへ追加すれば、IE9ののみにCSSが
効果を発揮します

#viewport{top:30px;}/* ＩＥ９以外 */
#viewport:not(:target){top: 50px¥9;}/* ＩＥ９　CSSハック */

私はIE9は持っていないのでちょっと確認が取れませんが・・・・・。

お礼

この方法で無事修正する事が出来ました。
お助けいただき本当に助かりました。
ありがとうございました！

回答No.1

kiyoto-777

1.絶対配置(absolute)は起点（原点）を決めてその起点に対しての
位置をtop と left で指定する。
起点が動けば絶対配置したものも起点が動くので
起点に対して相対的に動きます。
起点のエリアの部分にmargin:auto;と指定していれば、
起点のエリアは画面の大きさをかえれば自動的に中央に
移動します。

下記部分のCSSが起点指定と考えられるが、margin: 0 auto;
となっているので縦の部分に関しては自動で中央寄せされ
位置が移動する。前後のHTML、CSSが不明なので
わからないが、　margin: 0 0;　としてみてはいかかでしょうか？

div.check {
position: relative;
width: 842px;
height: 189px;
margin: 0 auto;
}

2.IEのブラウザの場合は、バージョンによってまったく違う
ブラウザと考えたほうがよい。
IEのブラウザのバージョンによって表示が異なる場合がある。

3.IEのブラウザバージョンを教えてください。

4.質問にかかれたHTML、CSSを設置されたホームページなどを
見たほうが回答しやすい。

お礼

ご回答本当にありがとうございます！
margin: 0 0;　としてみたのですが、左揃えになるだけで縦位置には変化がありませんでした。
IEのバージョンは9です。7と8ではなぜか正常に表示されました。

実際のHPを見ていただきたいのですが、今現在不特定多数の目に触れる場所にURLを公開出来る状態にありませんので申し訳ないです…。

ちなみに#viewportのtop: 30px;が他ブラウザで見た際の正常位置になりますが、
これをtop: 50px;とすると、IE9でも正常位置になるようです（他ブラウザでは当然位置が下がるのですが…）