IE8以下でCSSで背景を指定したのに全く表示されない時にチェックしておきたいポイント

ie-point

ie-point

CSSで下記のような背景を指定するケースって多いと思います。

background: url(../images/common/arrow.png)left center no-repeat;

でもこれだと背景画像が表示されないんですよ!(IEの解釈では。)

正しくは下記の通りです。

background: url(../images/common/arrow.png) left center no-repeat;

どこが違うかわかります?

実はleftの前に半角スペースが入っているかいないかです。

モダンブラウザでは問題なく表示されるので結構見落としがちですが、半角スペースが入っていないとIE8以下では表示されなくなります。

環境によってはIE9でも表示されない場合もあるようです。

背景画像が表示されないぞ!って時はこういったポイントをチェックしてみると修正できると思います。

おすすめ記事

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

IE7でdisplay:inline-blockを適用させる方法
Sublime Text 2で自動補完してさらさら~っとHTMLやCSSを記述する方法
Web制作者に必須のFTPクライアントソフト!FileZillaのメリットとは?
最近残りやすくなったな~って感じるWEB製作者の皆様!Clear Cashがめっちゃ便利と強く言いたい!
これだけあればOK! WEB制作で必須の簡単なURLを入れるだけでダミー画像が作れるWebサービス3選
WordPressをインストールしたディレクトリと同じ階層にindex.htmlがある時の開発準備TIPS
Web制作にルーチンワークに便利!Googleスプレッドシートを利用した簡単html生成法
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
IEチェックでの修正に必須!IEの条件分岐&IE7やIE8などのCSSハック一覧をまとめてみました。
GitHubGistでWhoops.と表示された時の対処法
[IE対策]IEでfade効果などをさせた場合のPNG画像が透過されない(黒くなる)時の対処法
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
楽天ショップのリンク付きの縦バナーを設置する方法
Webサイトを制作したらしておくべきチェックリスト
PC・スマホでMedia Queriesを使って個別にCSSを読み込ませる方法(IE対策済み)

Menu

HOME

 TOP