KYOKUTYO NO BLOG.

ChromeやFirefoxで作っていって、最後にIEの対応をする場合に注意するポイント。

CSS

IEの場合だけ追加で読み込むCSSファイルを用意します。
IE用のCSSファイルを読み込む部分は<!--[if IE]>〜<![endif]--> で囲っておくと他のブラウザではコメント扱いされます。

• rgba(0,0,0,.3) などとカラー指定してる場合、#000とかに指定方法を変える
• 半透明の背景はbg-xxx-ie.pngなどPNGファイルを用意してbackgroundの指定を上書きする(IE6は・・・)
• 角丸なんかやり方あったかもだけど、、ひとまず対応しない
• シャドウもやり方ありそうだけど、これもひとまずは対応しない IE進化待ち

JavaScript

jQuery使ってるとけっこう吸収してくれる。JSはファイルを分けずに対応してる。

• number + 'px' としてるところを parseInt(number) + 'px' と型を揃える
• textareaの改行がおかしい場合はescapeした後にreplaceする replace(/%0D%0A?/g,"\r\n")でうまく動いてるみたい (半角スペースなどはまた戻す必要がある)
  他によい方法を模索中、、
• hiddenなinputのvalueに値を突っ込むことができず、type="text"だとOKぽいのでCSSでdisplay: none;して隠す

ひとまずこんな。

「IEでtype="password"なフォームに入力した文字が見えない」というのは
●や*に変換されてしまうという意味ではなく、空っぽのように見えてしまう症状。
バージョンは8。Webフォントを使ってる場合に起きるのかも。

文字の色がIEだけ背景と同じ色になってるのか、など疑ってみたけど違うらしい。結局↓こういうことだったのだけど、使ってたWebフォントがまずかったのか、Webフォント全般NGなのかは不明。

IEでWebフォント使ってるページのtype="password"なフォームに入力した文字が何も表示されない●とか*とか。見えないけど文字は存在してて選択はできる。IEの場合だけ適用するCSSファイルで font-family: sans-serif; したら●が見えた。

2011/10/19 Wednesday 20:13:54 via YoruFukurouReplyRetweetFavorite

@kyokutyo

kyokutyo

なぜかIEでliの「・」が表示できない。リストのポチ。
結論から言うと、float指定してあるliに対しては「・」が表示されないみたい。

li {
  float:none;
}

してあげればおk。デフォルトではこうなってるから、いつのまにかfloatが指定されちゃってる状況ってあんまりなさそうだけど。横に箱を並べてそれぞれの箱の中にリストを表示するもの(↓テーブルで再現)、今回コレでやってしまった。

こんなHTML書いて、

<ul>
  <li>
    <ul>
      <li>リスト1の1</li>
      <li>リスト1の2</li>
      <li>リスト1の3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>リスト2の1</li>
      <li>リスト2の2</li>
      <li>リスト2の3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>リスト3の1</li>
      <li>リスト3の2</li>
      <li>リスト3の3</li>
    </ul>
  </li>
</ul>

CSSにはこんな風にlist-style-type指定してがんばって「・」を表示させようとするが、IEだと表示されない。

li {
  float:left;
  width:200px;
  list-style-type:none;
}

li li {
  list-style-type:disc;
}

li の孫の li にも float:left; が効いちゃってるので float:none; を足してあげる。すると表示された。

li {
  float:left;
  width:200px;
  list-style-type:none;
}

li li {
  list-style-type:disc;
  float:none;
}

今日はまったポイント。badkground-positionをキーワード(left,center,right,top,center,bottom)で指定すると変になるのかな。
background-repeat:no-repeat;と指定してても、background-position:left top;とやると表示が繰り返されたり、表示位置が変だったりするみたい。
background-position:0px 0px;などとpxで指定するのが吉。(0の場合はpxいらないかな)
枠外に背景が表示されてる場合にはoverflow:hidden;がけっこう役に立った。

/* [1] for ie6 */
div#hoge {
color:#f00;
}

/* [2] for fx and safari and opera and... */
html[xmlns] div#hoge {
color:#0f0;
}

/* [3] for ie7 */
*:first-child+html div#hoge {
color:#00f;
}

[2]を効かすにはhtmlタグに要xmlns属性。