ellsif blog

愛知のフリーランス プログラマのメモ書きなど

" IEバグ " のアーカイブ

IE8はOSのバージョンによってレンダリングが違う?

Windows7 XPモードのIE8で1pxの点線(dotted)が実線(solid)になってしまうという現象に遭遇しました。

IE6じゃあるまいし、IE8にもなって1px点線が表示できないわけがないと思い、Win7のIE10を8にダウングレードして表示確認したところ、きちんと点線で表示されていました。
同じIE8でもXPと7ではレンダリングに違いがある模様。
一応、対象には入っているものの、ギリギリのところなんですかね。

というわけで、
XP mode → IE7
Vista → IE8
7〜 → IE9〜

のような感じで確認環境を整え直そうかと思案中です。

余談。
IEをダウングレードは簡単にできますが、その後再び戻すときに何回もWindows Updateをかけないと戻らないのでオススメしません(笑)

【IE8,9】filterをかけると:hoverで不具合

【現象】

IE独自フィルターをかけた要素に擬似要素:hoverを使うと、ブロック要素でもテキスト部分にしか:hoverが適用されない。
IE8,IE9でこの現象を確認。

div {
	width: 100px;
	height: 100px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#cccccc');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#cccccc')";
	background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
	background-image: -ms-linear-gradient(top, #ffffff, #cccccc);
	background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
	background-image: linear-gradient(top, #ffffff, #cccccc);
	line-height: 100px;
	text-align: center;
	border: 1px solid #888;}

div:hover {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#ffffff')";
	background-image: -moz-linear-gradient(top, #cccccc, #ffffff);
	background-image: -ms-linear-gradient(top, #cccccc, #ffffff);
	background-image: -webkit-linear-gradient(top, #cccccc, #ffffff);
	background-image: linear-gradient(top, #cccccc, #ffffff);
	color: #f00;
	cursor: pointer;}

IE8, IE9以外

カーソルを合わせると背景のグラデが反転&文字が赤に。
IE8

IE8,IE9(画像はIE8)

要素の上にカーソルを合わせても反応しない。
IE8NG

テキストの上では正しく動作する。
IE8TEXTON

【対処法】

該当の要素にbackground-colorを指定すればOK。

div {
	width: 100px;
	height: 100px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#cccccc');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#cccccc')";
	background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
	background-image: -ms-linear-gradient(top, #ffffff, #cccccc);
	background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
	background-image: linear-gradient(top, #ffffff, #cccccc);
	background-color: #fff;
	line-height: 100px;
	text-align: center;
	border: 1px solid #888;}

div:hover {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#ffffff')";
	background-image: -moz-linear-gradient(top, #cccccc, #ffffff);
	background-image: -ms-linear-gradient(top, #cccccc, #ffffff);
	background-image: -webkit-linear-gradient(top, #cccccc, #ffffff);
	background-image: linear-gradient(top, #cccccc, #ffffff);
	color: #f00;
	cursor: pointer;}

※色は何色でもOK。入れても適用されないです。

backround-color指定後

IE8OK
IE8,9でも正しい動作をするようになりました。