質問編集履歴

1 誤字を修正しました

Auxo

Auxo score 36

2015/04/13 00:14  投稿

IEでのみ背景画像の一部がおかしな表示になる
DIVで表のような形式でくみ上げているデザインがあります。
その中の一部に格子状の背景があるのですが、その背景がIEでのみ、重なっているDIVに背景色を付けた場合に、そのDIVの位置に存在する背景画像の格子がぼける不具合がおきています。
原因は不明なのですが、発生するケースは親要素にmargin:autoを設定した場合であることはわかっております。
```lang-html
<div id="wrapper">
   <div id="header"></div>
   <div id="content">
       <div id="parent">
           <div id="bgimage"></div>
           <div id="a"></div>
           <div id="b"></div>       
           <div id="c"></div>   
           <div id="d"></div>
       </div>
   </div>
   <div id="footer"></div>
</div>
```
```lang-css
#parent { width: 550px; margin: 0 auto; position: relative; }
#bgimage{ width: 500px; height: 500px; position: absolute; top: 0px; left: 0px; background-image: url("image/sample.png"); background-size: 500px 500px; }
#a { height: 50px; width: 50px; position: absolute; top: 50px; left: 50px; }
#b { height: 50px; width: 50px; position: absolute; top: 150px; left: 50px; }
#c { height: 50px; width: 50px; position: absolute; top: 250px; left: 50px; }
#d { height: 50px; width: 50px; position: absolute; top: 350px; left: 50px; }
```
このようなCSS出会った時に、クリックされたDIVの背景に色を設定するとなぜかbgimageの画像の線が部分的にぼけるという現象が発生します。
このようなCSSであった時に、クリックされたDIVの背景に色を設定するとなぜかbgimageの画像の線が部分的にぼけるという現象が発生します。
parentに設定した「margin: 0 auto」をなくすと発生しないことから、何かこの部分が影響していると思われますが、そもそも背景画像と関係のないDIVの背景色を設定しただけで、固定サイズの画像のそれも一部の表示がおかしくなるという現象が起きており、どうすれば解消できるのか見当もつきません。
画像形式をpng、bmp等変更しても、画像サイズを変更しても、何をやってもIEだけはこの現象が起きてしまいます。
他のブラウザでは発生しません。
これは何かIEのバグなのでしょうか。
どうすればこの現象を回避できますでしょうか?
  • CSS

    16409 questions

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

  • Internet Explorer

    493 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る