:first-letter問題

css

spanを入れてみると, IE6でもfont-sizeが全称セレクタで指定した部分が変な風に利いてくる.

Firefox2.0
Opera9.00
IE6SP2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
* {
 font-size:100%;
 font-style:normal;
}

p {
 color: #666;
 font-size:2em;
 font-style:italic;
}

p:first-letter {
 color:#c00;
}

p span {
 color:#0c0;
}

div {
  color: #777;
  font-size: 2em;
}

div:first-letter {
  color: #c00;
}
 
div:before {
  content: "Inserted text:";
}

div span {
 color: #0c0;
 font-size: 2em;
}

</style>
<title>sample</title>
</head>
<body>
<p><span>THIS</span> IS A TEST.</p>
<div><span>more</span> test</div>
</body>
</html>

:beforeや:afterで追加した要素に関してはFirefoxやOperaしか対応していないので, 大丈夫. ちゃんとmoreが緑色で大きく表示され, "Inserted text"のIが赤くなる.