Pocket

SOHOでのお仕事の発注依頼がありまして、カチカチと作業をしていまして、こんなところでつまずいてしまいました。

[dec]
li.list {
list-style-image: none;
list-style-type: none;
padding-top: 0px;
text-indent:-9999px;
font-size:0;
line-height:0;
float:left;
}

li.list a {
float:left;
font-size: 12px;
display: block;
height: 20px;
width: 220px;
background-color: #E8E8E8;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
color: #666666;
text-decoration: none;
text-indent: 15px;
font-weight: lighter;
padding-top: 9px;
text-align: left;
line-height:normal;
}

li.list a:hover {
background-color: #848484;
color: #FFFFFF;
}
[/dec]

これはIE7では問題なく表示されるが、IE6で表示させてみると、思ったように表示されない。

[dec]
*html li.list a {
float:left;
font-size: 12px;
display: block;
height: 30px;
width: 220px;
background-color: #E8E8E8;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
color: #666666;
text-decoration: none;
text-indent: 15px;
font-weight: lighter;
padding-top: 9px;
text-align: left;
line-height:normal;
}

*html li.list a:hover {
background-color: #848484;
color: #FFFFFF;
}
[/dec]

って書けば、IE6とIE7と同じように表示される。

しかし、W3CのCSS検証にかけると、*html li.list a:hoverとか*html li.list aは使っちゃだめです。っていわれる。
つまり、不合格なんですけど、どうすればこれを回避できるのか?というのが問題。

キーワードは、IE6 IE7 10px heightです。

IE6とIE7でheightとが10pxも違うっていうのは本当に困る。。。

同じ症状の人がいないか検索してみたが、
IE6で、マージンが2倍になってしまうバグ”を見てみたけど、
これは、margin-left: 10px;の設定が、IE6とIE7で表示すると、margin-left: 20px;に2倍になってしまうというバグ。

このバグとの症状と今回の問題点が異なるので、ちょっと自分でも考えてみようかと思う。

もしCSSのスペシャリストさんがいらっしゃったらご教授していただけると幸いです。

よろしくお願いいたします。

From xxxYukihiroxxx

Pocket

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください