bxSliderで画像の位置が右にズレる場合の対処法:メモ

忘れないうちに自分用メモ書きとして。

IEの開発者ツールによるチェックの際、IE7だけbxSliderがおかしな表示なっていたので、その際の解決策をメモ書きします。

以前も何度か使っていたのですが、今回のケースははじめてで難儀しました…。

bxSliderで画像が右にズレる

bxSliderをIE7で見た時に、画像が右に30pxほどずれていました。ズレて空いた左の部分には最期の画像（5枚なら、1枚目の左側に少しだけ5枚目が見えている感じです）が表示されており、画像の開始位置がおかしくなっていました。

開発者ツールの機能でそのまま調べていましたが、全く分からず。Web上で検索してもほぼ情報はなく、唯一あった「bxsliderの画像が左によってしまう」という情報も違いました。

結論を書きますと、olのmargin-leftが問題でした。空いてる隙間の幅に見覚えがあり、カンで見つけた次第です。

olに「margin-left:0;」を設定すれば治りました。ちなみに、なぜIE7だけこうなったのかは未だにわかりません。開発者ツールでもこの部分の数値も確認できず、他に確認する時間もなかったため諦めました。

ちなみに、以前は「リセットCSS」を使っていてその際にmarginを一度0にしていたために発現せず、今回は使わなかったため発現した模様です。おそらくですが。

上記とは別に、スライドする画像の開始位置がIE7のみ真ん中までズレることがありました。

前回の経験からolになにかあるのだろうという点と、ズレ方からpotisionの基準位置が問題なのかとアタリを付けましたが、どちらも原因ではありませんでした。

調べた結果、別の理由から設定していたtext-align:center;が原因でした。

原因が分かれば簡単で、text-alignの設定をbxSliderに影響がでないように変更しました。

他のブラウザやバージョンでは影響がなかったのですが、「bx-viewport」のcss設定に影響が出そうな書き方は避けた方が良いです。

いくつかの状況が重なりましたので、他の方のお役に立つとは思えませんが、「bxSliderの画像が右にズレる」「左に別の画像が入り込んでくる」などの問題につまづいた時には、もしかしたら一助になるのかもしれません。

3人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。