質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3765閲覧

IEでのみ背景画像の一部がおかしな表示になる

Auxo

総合スコア34

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/04/12 15:13

編集2015/04/12 15:14

DIVで表のような形式でくみ上げているデザインがあります。
その中の一部に格子状の背景があるのですが、その背景がIEでのみ、重なっているDIVに背景色を付けた場合に、そのDIVの位置に存在する背景画像の格子がぼける不具合がおきています。

原因は不明なのですが、発生するケースは親要素にmargin:autoを設定した場合であることはわかっております。

lang

1<div id="wrapper"> 2 <div id="header"></div> 3 <div id="content"> 4 <div id="parent"> 5 <div id="bgimage"></div> 6 <div id="a"></div> 7 <div id="b"></div> 8 <div id="c"></div> 9 <div id="d"></div> 10 </div> 11 </div> 12 <div id="footer"></div> 13</div> 14

lang

1#parent { width: 550px; margin: 0 auto; position: relative; } 2#bgimage{ width: 500px; height: 500px; position: absolute; top: 0px; left: 0px; background-image: url("image/sample.png"); background-size: 500px 500px; } 3#a { height: 50px; width: 50px; position: absolute; top: 50px; left: 50px; } 4#b { height: 50px; width: 50px; position: absolute; top: 150px; left: 50px; } 5#c { height: 50px; width: 50px; position: absolute; top: 250px; left: 50px; } 6#d { height: 50px; width: 50px; position: absolute; top: 350px; left: 50px; }

このようなCSSであった時に、クリックされたDIVの背景に色を設定するとなぜかbgimageの画像の線が部分的にぼけるという現象が発生します。

parentに設定した「margin: 0 auto」をなくすと発生しないことから、何かこの部分が影響していると思われますが、そもそも背景画像と関係のないDIVの背景色を設定しただけで、固定サイズの画像のそれも一部の表示がおかしくなるという現象が起きており、どうすれば解消できるのか見当もつきません。

画像形式をpng、bmp等変更しても、画像サイズを変更しても、何をやってもIEだけはこの現象が起きてしまいます。

他のブラウザでは発生しません。

これは何かIEのバグなのでしょうか。

どうすればこの現象を回避できますでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決方法が見つからない為実現方法を変更しました。

投稿2015/04/20 05:51

Auxo

総合スコア34

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問