ただ、今まで、わかって来たことは Chrome は一番 HTML 標準を準じているとのことです。 Firefox も結構いいですが、たまにこれはちょっと違うなと思われます。
バグなおしの経験：
1 IE 6, 7, 8 である要素をクリックすると、ブラウザの画面が下または上に飛ぶ。
これは大体クリックされた要素の position は relative か、absolute で、しかも親要素の position は何も設定されてないためです。
要素の position は「初めて position は static ではない親」の位置から決めます。もし親要素の position が設定してなかったら、デフォルトは static になります。そうすると、ブラウザは上まで一つ一つ探して、body まで見つからなかったら、body の位置を参照して、要素の位置を決めます。
そうすると、ある position 設定されている要素をクリックすると、もし親の position が何も設定されてなかったら、 body の位置と参照して、ブラウザが要素を表示しようとして、ウェブページが飛ぶようになります。
IE9 と IE10 はこのバグがなおされたようです。
2 IE の haslayout 関係
古いバージョンの IE は悪魔です。。。 具体的に下記をご参照：
3 Firefox と Chrome で要素の default padding などの設定が違う。
そうすると、div や、button のデフォルト大きさが違います。
4 ブロック要素と インライン要素
div, p などはブロック要素で、span などはインライン要素です。ブロック要素の中にはブロック要素を含むと、ブラウザが内包したブロック要素の前に終了タグを挿入します。そうすると、たまに、一つ段落の中にスペースができたりします。
このブロック要素中のブロック要素をインライン要素に変更したら、自動的に変なスペースがなくなります。
5 IE, Firefox 4〜, opera では button type=image の値が submit されない。
イメージボタンは便利なものですが、その中の value が submit されないので、label + image タグを使った方がいいです。
これは W3C 標準の解読が違うため、イメージボタンはクリックされた位置だけ送信されるようになっています。
元々、Firefox 3 は送信しましたけど、 4 からは他のブラウザと同じように送信されなくなりました。
Chrome は大丈夫です。：）
6 IE で要素が Float 位置が間違う問題
これは大体 IE7, IE8 で発生します。float を display: inline-block; zoom: 1; に直せば、問題が解消されます。
続いて、IE の CSS Hacks:
HTMLタグだったら：
これも
IE7 では文字列は slice 関数が持ってないから、エラーになります。 IE8〜, Chrome などはちゃんどあります。
cross browser は本来一つ一つのブラウザをみて、少しずつ調整することです。
あ、後一つ
IE 7 から quirks モードの設定はメニューに追加されて、イントラネットのウェブページだったら、自動的に quirks モードになります。
そうすると、Layout が大体崩れます。そのチェックを外した方がいいです。
ふろしき.js
そうすると、div や、button のデフォルト大きさが違います。
4 ブロック要素と インライン要素
div, p などはブロック要素で、span などはインライン要素です。ブロック要素の中にはブロック要素を含むと、ブラウザが内包したブロック要素の前に終了タグを挿入します。そうすると、たまに、一つ段落の中にスペースができたりします。
このブロック要素中のブロック要素をインライン要素に変更したら、自動的に変なスペースがなくなります。
5 IE, Firefox 4〜, opera では button type=image の値が submit されない。
イメージボタンは便利なものですが、その中の value が submit されないので、label + image タグを使った方がいいです。
これは W3C 標準の解読が違うため、イメージボタンはクリックされた位置だけ送信されるようになっています。
元々、Firefox 3 は送信しましたけど、 4 からは他のブラウザと同じように送信されなくなりました。
Chrome は大丈夫です。：）
6 IE で要素が Float 位置が間違う問題
これは大体 IE7, IE8 で発生します。float を display: inline-block; zoom: 1; に直せば、問題が解消されます。
続いて、IE の CSS Hacks:
- body {
- color: red; /* all browsers, of course */
- color : green\9; /* IE8 and below */
- *color : yellow; /* IE7 and below */
- _color : orange; /* IE6 */
- }
HTMLタグだったら：
<!DOCTYPE html> <!--[if lt IE 7]> <htmlclass="no-js ie ie6 lte9 lte8 lte7"><![endif]--> <!--[if IE 7]> <html class="no-js ie ie7 lte9 lte8 lte7"><![endif]--> <!--[if IE 8]> <html class="no-js ie ie8 lte9 lte8" ><![endif]--> <!--[if IE 9]> <html class="no-js ie ie9 lte9"><![ endif]--> <!--[if gt IE 9]><html class="no-js ie gtie9"><![ endif]--> <!--[if !IE]><!--> <html class ="no-js not-ie"> <!--<![endif] -->
これも
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">IE7 では文字列は slice 関数が持ってないから、エラーになります。 IE8〜, Chrome などはちゃんどあります。
cross browser は本来一つ一つのブラウザをみて、少しずつ調整することです。
あ、後一つ
IE 7 から quirks モードの設定はメニューに追加されて、イントラネットのウェブページだったら、自動的に quirks モードになります。
そうすると、Layout が大体崩れます。そのチェックを外した方がいいです。
ふろしき.js
0 件のコメント:
コメントを投稿