スポンサーサイト

--年--月--日
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

IE6.0とFirefoxの見た目を同じにするために(アンダースコアハック)

2007年03月03日
「小粋空間」のyujiroさんのテンプレートのソースを見ていますと
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;

のような記述がところどころにありました。
「_」って何だろう???(^・ω・^).....ンニュニュ?
ということでいろいろ調べてみることにしました。
すると同じく「小粋空間」のyujiroさんの
アンダースコア・ハックにて書いてありました。
「_」で記述するとIE(Internet Explorer)ではこちらの方が有効になるのだとか!!

padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;

この記述だと
padding: 6px 3px 0px 3px;
を全てのブラウザが読み込み、その後
_padding: 5px 3px 2px 3px;
をIEが読み込むわけですね!!

私はIE6.0とFirefoxを併用しているのですが、
見た目があまりにも違うので困っていました。
右のサイドバーの各プラグインタイトルの部分ですが、
その高さをheightにて設定しています。
height:22px;
と設定してあるだけだとIE6.0とFirefoxでは下のような見た目の違いがでました。
↓IE6.0
070303ie6.jpg070303firefox.jpg

Firefox2.0↑
IE6.0の方は高さが足りず、
アイコンの画像が全て表示しきれていません。

ここでアンダースコアハックを使い
height:22px;
_height:30px;

(書く順番に注意してくださいね。)
のように設定してみるとほぼ同じ見た目になりました。
これでIE用とFirefox用のCSSを設定できることになります。

が、しかしっ!!
CSS2だとこれはエラーになるらしい。。。orz
多用はよろしくないようです。。。

ちょうどW3C CSS 検証サービスというものを見つけたので
早速うちのCSSをチェックしてみました。
確かにアンダースコアがついているものはアウトです。Σ(; ̄□ ̄A アセアセ
警告も108も出た!!(苦笑)
まだ分からないことだらけなのですが、CSSについてももっと勉強していかなければ。
ただ私にとってはブログの見た目も大事なので、
しばらくはこのアンダースコアハックを使っていきたいと思っています。
出来るだけ他の方法で回避できるものはしていきますけどね。

ちなみにIE7.0だとFirefoxと同じ見た目になっておりました。
ということはIE7.0が主流になればアンダースコアハックも無用になるわけですね。
ところが今の段階では、まゆびのブログを見てくださってる方の主流はまだまだIE6.0みたいです。
BlogPetのアクセス解析でもこんな結果が出ていました。
070303access.jpg

やっぱり。ということはやっぱりしばらくはアンダースコアハックのお世話になりそうですわ。
ハックについてはCSSバグ回避 CSS辞典に書かれていますので
興味のある方はぜひどうぞ♪
ハックを使う必要のないデザイン(サイト設計)を心がけることは、どのような環境でも正常に閲覧できるデザインへとつながります。適度に前方・後方互換の両方を備えたデザインを目指してください。
ヽ( ´ ▽ ` )ノ ハーイ 頑張ります~!!

↓ポチっとしてくれると嬉しいです♪d(*⌒▽⌒*)b ニコニコッ
banner_02.gif

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

トラックバックURL


トラックバック

オイラの仕事。 from セナ日記
以前にも書いたけれど、今現在の将来に向けたオイラのビジョンっていうのは、 WEBに関する知識を強みにしながら企業のコミュニケーション活動全般を 媒体に限らずトータルにディレク... [Read More]

コメント

まゆびさん、こんにちはー♪

>アンダースコア・ハック
(□。□-) フムフム そんな風に呼ぶのですね。しかもIE6.0用の記述だったのですか!
以前(CSS勉強開始のころ)に調べたときには、よっくわからなかったよーな・・・(>▽<;; アセアセ
こちらの記事だと、とってもよくわかりますよ。(o*。_。)oペコッ(o*。_。)oペコッ

>IE6.0とFirefoxでは下のような見た目の違いがでました。
おお!ってことは、yozoはyujiroさんのCSSがベースだから、見た目の違いがなかったわけですね。あらためてyujiroさんに感謝でっす♪そして、解説してくれたまゆびさんにも大感謝♪(^○^)

>しばらくはアンダースコアハックのお世話になりそうですわ。
⊂((〃 ̄ー ̄〃))⊃ ふふふ とても説得力ある記事ですね。まだまだIE6.0が主流のようですから、yozoんちもアンダースコアハックはそのままにしておきまっす♪大変勉強になりました。ありがとーございまっす♪m(_ _)m
yozoさん、こんばんは♪(o・ω・)ノ
私もこのアンダースコアハックは長い間謎でした。
なんという名前なのかも分からなかったですしね。
この名前を知ってから、いろいろ検索してやっとなんとなくですが、
この記述の意味が分かるようになりましたー。

>yozoはyujiroさんのCSSがベースだから、見た目の違いがなかったわけですね。
確かにyozoさんのテンプレはIEで見ても、Firefoxで見てもほとんど違いがないです。
私は画像を入れたりいろいろしちゃっていますからね。
このアンダースコアハックのおかげでなんとか見た目も調整することが
出来ました♪(*'ー'*)ふふっ♪

BlogPetのアクセス解析を見るとやっぱりIE6.0がほとんどなんですよね。
なのでこのアンダースコアハック。エラーがあっても手放せません。(笑)
しばらくはこれで様子をみたいと思っています♪(*^-^)
まゆびさん、.。゚+.(,,・ω・,,)ノ。+.゚オハョ~ゥ!!
アンダースコアハック・・・φ(・ω・*)フムフムφ(。_。*)メモメモ
初めて知りますタ~(*´ω`*)テレテレ
勉強になります、うん。
よくσ(・ω・*)がCSSについて書かれてるブログで読ませていただいているところなのですが
http://www.lucky-bag.com/archives/2005/08/default_style.html
これは全く関係のないことですかね??
なんだかブラウザによって差異を無くすための呪文だと書かれてます(笑
全く見当違いでしたらごめんなさい~ヒューン ε=ε=ε= (o-ω-)o
モンビッケさん、こんにちは♪(o・ω・)ノ
アンダースコアハックは私もこのテンプレートに変えたときに知ったのですが、
エラーは出てくるものの、見た目は同じになるのでいいかな?なんて思っています。
細々と設定しなくてはいけないのでちょっと面倒なんですけどね。(^^;;
モンビッケさんがご紹介してくださったページにもお邪魔してみました!!
なるほど!!こちらの方がいいかも!!_〆ヾ( ̄(エ) ̄ メモメモ・・・
ちょっとよく分からない部分もあるのでちょっと勉強してみます!!
素敵なページを教えてくださってありがとうございました♪(*- -)(*_ _)ペコリ
やっぱりブラウザによっての見た目の違いはないほうがいいですものね。(*^-^)ニコ
まゆびさん、こんばんはー(。・x・)ゝ
おぉぉ。これは勉強になる記事ですね~ ( ..)φメモメモ。
アンダースコアハック・・・初耳でしたが、以前どこかでこれそのものは見たことがありました!!
なるほどね~。ブラウザ間の差異をなくすものだったんですね~☆
たしかにうちもIE6で見に来てくださっている方がかなり多いので、
ちょっとテンプレートの記述を少しずつ見直してみようかと思います。
モンビッケさんご紹介のリンク先もしっかりメモして、勉強し直して来ますー(*`・ω・)ゞ
mioさん、こんばんは♪(^ー^)ノ
さすがmioさん!!見たことがあったのですね~。
私は何これ?って感じでした。(笑)
調べて使ってみるととりあえず見た目はよくなったので
何箇所かで使っております。エラーなんですけどね。(^^;;
まだまだIE6.0が主流のようなのでそちらで綺麗に見えるように
私も記述をしていこうと思っています。お互い頑張りましょう♪(笑)
モンビッケさんの紹介してくださったところは本当にためになりますね~!!
モンビッケさんに感謝です~!!(*^-^)ニコ

コメントする

サイト管理者にのみ通知する
コメントをプレビューする?
ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。