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のバグなのでしょうか。 |
| どうすればこの現象を回避できますでしょうか？ |
