IE用CSSが適用されない
通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。
<!DOCTYPE HTML>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]-->
<style>
body {
background-color:#FFFFFF;
color:#333333;
font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif;
}
#figure_main {
font-size:12px;
margin-top:10px;
margin-left:10px;
width:510px;
}
</style>
</head>
<body>
<div id="figure_main">
<div class="box1"> <span>取締役会</span> </div>
<div class="box1"> <span>取締役社長</span> </div>
<div class="box2"> <span>常勤役員会</span> </div>
<div>
<ul>
<li class="list_l">営業局</li>
<li>人材派遣部</li>
</ul>
</div>
</div>
</body>
</html>
HTMLには<!--[if IE]>を記述し、
ie.cssには
@charset "utf-8";
/* CSS Document */
#figure_main {
font-size:11px;
}
と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？
宜しくお願いします。
お礼
どうも、ありがとうございました。 説明不足なのに気づきました。実は、letter-spacing を 試す前には、スペースを入れてました。これだと、ブラウザの 種類に関係なく使えます。 しかし、わざわざスペースを入れる事なしで、スタイルシートで できないのかなと考えて試したというのが今回の質問のポイントです。 IEでも複数文字のテキストに適用すると、中間のスペースには効きます。 IE以外は:firset-letterなのだから後ろに文字があると考えて、 letter-spacingの効果を効かしてくれるが、IEはあくまでも１文字と みて後ろに文字が続くことを考慮してくれないようです。
補足
自己解決いたしました。 padding-rightが、どのブラウザでもOKでした。 :first-letterへのpaddingは全然考えてなかったのですが ふと思いついて試したら、ちゃんと効きました。 ありがとうございました。