2018年04月02日

備忘録:IE11の画像表示のCSSバグのハック、SVG画像の不具合回避。

IE11でヘッダーナビを動作させるとボタンがヘッダーのセンターへ動くCSSバグ。下記で解決。
position: absolute;にして位置を指定。発見するのに一日がかり(苦笑)。

/* for IE11 ボタンを押した時に位置がセンターに動くのを防ぐ */
@media all and (-ms-high-contrast:none){
*::-ms-backdrop,header .ボタンのclass {
position: absolute;
top: 23%;
right: 0;
}
}
他にもSVG画像の位置ズレバグもあって、SVGタグに画像の使用時の大きさとpreserveAspectRatio="xMinYMid"を追加して、下記のように
<svg  width="16" height="16" version="1.1" 〜 xml:space="preserve" preserveAspectRatio="xMinYMid">
それでもどうしようもないものはPNGに。
しかしIE11のレンダリングが特殊過ぎ。なんで????
posted by ハギー at 15:20| Comment(0) | 仕事がらみ