Posts Tagged ‘CSS’

このページの目次

CSSで複数のクラスを指定したセレクタがIE6でうまく機能しない

木曜日, 9月 3rd, 2009

こんにちは、なかわけです。

仕事中に見つけたIE6の不具合。
メニューがあって、選ばれてるものだけ背景色を変えたかったときのこと。
こういう風に書くとIE6でうまく機能しませんでした。

<ul>
    <li class="menu">ねこ</li>
    <li class="menu selected">ゲーム</li>
    <li class="menu">チョコレート</li>
</ul>
.menu {
    background:#CCCCCC;
}
.menu.selected {
    background:#CC0000;
}

この場合.menuと.selectedを同時に適用したゲームの背景はグレーになり、赤くなってくれません。
このときは、別の方法で解決しましたが、以下のページに回避方法が紹介されてました。

http://css-el.seesaa.net/article/108157845.html

でも、場合によっては無駄な要素を増やしたり、CSSのセレクタに文脈セレクタを追加したりしないといけないからヤダなー。

IEでCSSで指定してもフォントのサイズが小さくならない

木曜日, 9月 3rd, 2009

こんにちは、なかわけです。

今日も仕事中に見つけたIEのこと。

取引先からもらったHTMLとCSSを元にコーディングをしていて、IEだけ文字が小さくならない不具合にぶつかりました。
なかわけがfont-size:10pxと書いた部分は小さくならず、取引先が書いたfont-size:77%は小さくなります。

取引先からもらったCSSにはこんな感じに書いてありました。

  font-family:'Lucida Grande',Arial,Helvetica,'ヒラギノ角ゴ Pro W3','メイリオ','MS Pゴシック',sans-serif;
  font-size: x-small;
  line-height:1.2;

どうやらfont-familyに日本語フォントより先に英字フォントを指定していると、
IEは指定されたフォントでは10pxにできないとご認識して10pxの文字指定を無視するようです。
(font-familyの順番を変えるとうまく10pxに変わりました。細かい検証はしてません)。
しかし、77%のようにパーセント指定すると小さくなります・・・。

調べればそれなりにわかったんだろうけど、ハメられたなー・・・。

IE6がgzip圧縮が使えない

木曜日, 12月 11th, 2008

こんにちは、なかわけです。

仕事中にphpで動的に生成したJavascriptやCSSがIE6でうまく動かない問題が起こりました。
動的に生成されたCSSの結果をコピペして静的ファイルして置き換えるとうまく動きました。

そのときは原因がわからなくてなんとなくごまかしてその場をしのぎましたがまた同じ問題に直面して今度こそはちゃんと原因を追究しないとなということでその場にいる仲間で調査しました。すると、以下のような記事を見つけました。

JSファイルが圧縮転送されてくると実行されないことがあった

参考:http://mz.skr.jp/note/2007/11/ie6-gzipped-javascript.html

IE6はgzip圧縮に対応しているようですが、どうやらその挙動は怪しいようです。
仲間と相談して圧縮しない設定にしたら、JSもCSSもちゃんと動作するようになりました。 

この不具合によってだいぶ時間を費やしました;;
またこの現象について調べてもあまり関連記事が見つかりませんでした。あまり知られてないのかな?
だとするとみんなに知ってほしいです。結構はまって時間浪費しますw