IE8リストマーク（list-style-type）の■と●がおかしいのを直す方法

IE8で、ul li、などを使った際に、●は小さく表示されたり、■は大きく表示されたりしてしまいます。

（IE7モードでは平気みたい！）

直す方法はないのかな、と探していたんですが
とりあえず、簡単解決する方法は、「IE7モード」にすることでしょうか。

headに

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

と記述します。

これが一番簡単とは思いますが、ひとつのブラウザのためにmetaタグを追加するのもなぁ・・。と思い！ちょっと考えてみました！

IE8ハックを追加、リストマークは使わずに、文字の●、■をcssで:before contentを使っていれちゃいます！

無理やりですけど、ふつうのものより綺麗に表示されると思います。

もしも、使う場合は、他と合わせるため、list-style-position: inside;にしておいたほうがいいかもしれないです！

標準

  • test
  • test1
  • test2
  • test
  • test1
  • test2
  • test
  • test1
  • test2

直したもの

  • test
  • test1
  • test2
  • test
  • test1
  • test2
  • test
  • test1
  • test2

※IE8意外では標準のもので表示されるよう、IE8だけに適用される用ハックを使っています。

CSS

/*○*/
html>/**/body ul.circle li {
	list-style/*\**/: none\9;
}

html>/**/body ul.circle li:before {
	font-size/*\**/: 6px\9;
	vertical-align/*\**/: middle\9;
	letter-spacing/*\**/: 1.5em\9;
}

head~/* */body ul.circle li:before {
	content/*\**/: "◯";
}

html:not(:target) ul.circle li:before {
	content: "";
}


/*●*/
html>/**/body ul.disc li {
	list-style/*\**/: none\9;
}

html>/**/body ul.disc li:before {
	font-size/*\**/: 6px\9;
	vertical-align/*\**/: middle\9;
	letter-spacing/*\**/: 1.5em\9;
}

head~/* */body ul.disc li:before {
	content/*\**/: "●";
}

html:not(:target) ul.disc li:before {
	content: "";
}


/*■*/
html>/**/body ul.square li {
	list-style/*\**/: none\9;
}

html>/**/body ul.square li:before {
	font-size/*\**/: 7px\9;
	vertical-align/*\**/: middle\9;
	letter-spacing/*\**/: 1.5em\9;
}

head~/* */body ul.square li:before {
	content/*\**/: "■";
}

html:not(:target) ul.square li:before {
	content: "";
}

でも、こんな面倒なことせずに、画像をつかっちゃえばいいかもしれないですけどね b

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/74

このページの先頭へ戻る