色指定のないborderによる値の上書きができない

症状

一旦指定されたボーダースタイル border:none; の指定を、ボーダー色の指定を省略したborderプロパティを用いて上書きすることができない。

※none以外のボーダースタイルは上書きできるそうです。

例示

<style type="text/css">
li {
  border: none;
}
li#color {
  border: 3px solid blue;
  color: blue;
}
li#nocolor {
  border: 3px solid;
  color: red;
}
</style>

<ul>
<li id="color">色指定あり</li>
<li id="nocolor">色指定ありなし</li>
</ul>
  • 色指定あり
  • 色指定なし

1番目のli要素は色指定のあるborderプロパティ、2番目のli要素は色指定のないborderプロパティを使用しています。MacIEでは2番目のli要素にボーダーが設置されないそうです。

修正状況

  • MacIE5.1でこの不具合が発生するそうです。

報告書き込み

IE5.1:mac でのバグ報告。ある要素に border: none; を宣言して、
後に “色の値を省略して” borderプロパティを上書き指定すると、
「none」が上書きされない。つまり、ボーダーが描画されない。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style type="text/css">
p, ol { margin: 0 0 0 40px; padding: 0; }
li { border: none; color: gray; }
li.test1 { border: solid !important; }
li.test2 { border: solid thick !important; }
li.test3 { border: solid red !important;}
li.test4 { border: solid thick blue !important; }
li.test5 { border: solid 5em transparent !important; }
</style>
<title>テスト</title>
<p style="border: solid 1px black">style=border: solid 1px black;</p>
<ol>
<li class="test1">border: solid !important;</li>
<li class="test2">border: solid thick !important;</li>
<li class="test3">border: solid red !important;</li>
<li class="test4">border: solid thick blue !important;</li>
<li class="test5">border: solid 5em transparent !important;</li>
</ol>
<p style="border: solid 1px black">style=border: solid 1px black;</p>

この例の場合、1項目と2項目のボーダーが描画されない。

1項目は border: solid medium gray; として解釈される筈。
2項目は border: solid thick gray; として解釈される筈。

色の値を明示している3〜5項目は正常に解釈される。

スポンサーリンク

関連記事

スポンサーリンク

UPPER関数 大文字に変換する

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る