Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

[MacIE5] クラスを複数指定した際のバグ

(半角スペースの前にある)複数指定したクラスと一致する名前を先頭に含むクラスも適用される

<div class="main hoge">

上記divにはmainだけでなく以下のようなクラスも適用される

  • mainbody
  • main-body
  • main-contents

■回避法

「abcd」というクラスがある場合

.abcd{
 background: green;
 border: 1px #000 solid;
}


(1)一致しないクラスを前に、一致するクラスを最後に置く

class="hoge abc"

半角スペースが後ろに入らないようにします。


(2)複数指定するクラスの名前に他のクラスと一致するものをつけない

×ダメな例

class="a hoge"
class="ab hoge"
class="abc hoge"

○正常に適用される例

class="abd hoge"
class="abce hoge"
class="ab-c hoge"


(3)優先順位によって回避する

.abc{
 background: blue !important;
 border: none !important; /* borderのリセット */
}

div.abc{
 background: blue;
 border: none; /* borderのリセット */
}


(4)クラスを複数指定しない。idを利用する。

<div class="abc" id="hoge">テキスト</div>


■サンプル

【×】MacIE5で見た場合

(1)HTML
<div class="abc hoge">
背景色は緑になる
</div>

(1)CSS
.abc{
  background: blue;
}
.abcd{
  background: green;
}

(2)HTML
<div class="main hoge">
右に罫線がつく
</div>

(2)CSS
.main{
  background: blue;
}
.main-contents{
  border-right: 10px #000 solid;
}

【○】通常

(1)HTML
<div class="abc hoge">
背景色は青
</div>

(1)CSS
.abc{
  background: blue;
}
.abcd{
  background: green;
}

(2)HTML
<div class="main hoge">
右の罫線はつかない
</div>

(2)CSS
.main{
  background: blue;
}
.main-contents{
  border-right: 10px #000 solid;
}

【×】MacIE5で見た場合はバグ再現のため実際のソースとは異なります。
【○】通常は表示HTML/CSSそのままです。
したがって、MacIE5で見ると通常MacIE5で見た場合と同じ表示になります。


回避法

背景色や罫線・文字色など別のプロパティをそれぞれ指定している場合は、優先順位(.wxyを.wxyzより下に記述する、!importantの付加など)によって回避し、罫線などはリセットする必要があります。


【○】MacIE5で見た場合

(3)HTML
<div class="wxy hoge">
背景色は青
</div>

(3)CSS
div.wxy{
  background: blue;
}
.wxyz{
  background: green;
}

(4)HTML
<div class="tax hoge">
右の罫線はつかない
</div>

(4)CSS
.tax{
  background: blue !important;
  border: none !important;
}
.taxy{
  border-right: 10px #000 solid;
}

(5)HTML
<div class="hoge wxy">
背景色は青
</div>

(5)CSS
.wxy{
  background: blue;
}
.wxyz{
  background: green;
}

【○】通常

(3)HTML
<div class="wxy hoge">
背景色は青
</div>

(3)CSS
div.wxy{
  background: blue;
}
.wxyz{
  background: green;
}

(4)HTML
<div class="tax hoge">
右の罫線はつかない
</div>

(4)CSS
.tax{
  background: blue !important;
  border: none !important;
}
.taxy{
  border-right: 10px #000 solid;
}

(5)HTML
<div class="hoge wxy">
背景色は青
</div>

(5)CSS
.wxy{
  background: blue;
}
.wxyz{
  background: green;
}

【○】MacIE5で見た場合、【○】通常どちらもHTML/CSSそのままです。
(3)ではdiv、(4)では!importantをつけて優先順位をあげています。
(5)はクラスの順番を入替えて回避しています。
MacIE5で見ても通常と同じように正しく表示されます。

関連記事
  1. comment

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/386-e93520f4

  1. trackback