人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

異なるブラウザ間での表示に強いCSSの書き方を知りたいです。
目的は、自分のはてなダイアリーのカスタマイズ。
目標は、以下の全てのブラウザで「そこそこ見られる」デザインにすること。
Mac OS X版IE5.1、NS7.1、Safari1.0
Mac OS 9版IE5.1、NS7.0
Windows版IE6、IE5、NS7.1

ブラウザによって解釈が違い過ぎ、MacとWinのIE5とか、WinのIE5と6ですら表示が異なるみたいで調整中です。
メーカーや業界の都合を押し付けられているみたいでなんかアレですが、参考になるURLを教えて下さい。
MacブラウザとかNetScapeに対応させる必要は無いというような、シェアに関する意見は不要です。よろしくお願いします。
なお、「Windows IE5に関しては、インライン系の要素の場合は完全にパディングは無視される」ことは知っています。

●質問者: ねがい かなみ
●カテゴリ:ウェブ制作
✍キーワード:CSS IE6 Mac Mac OS Mac OS X
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● KDDI
●20ポイント

http://cssbug.at.infoseek.co.jp/

CSSバグリスト@CSSバグ辞典スレッド

CSSバグリストの一覧です。

vertical-align等、一部矛盾しているCSSもあるので全てに対応させるのは難しいと思います。

全てのブラウザで見れるようにするには、格好悪いしW3Cの定義には合わなくなりますが、

物理タグ等をメインに使うのが1番だと思います。

◎質問者からの返答

うわ。こうやってリストにされると、互換を保つのがいかに大変か良く分かります。これをまとめた人は偉いですね。ありがとうございます。


2 ● nix
●20ポイント

http://pc5.2ch.net/test/read.cgi/hp/1078463560/l20

CSS/DHTMLバグ辞典スレッド 第4版

2chの掲示板ですが、比較的参考となるURLがまとまっていると思います。

OPERAやMozillaFireFoxなどで確認しながら製作し、IEでチェックする、という形で作業を進めれば、比較的うまくいくと思います。

自身、いまちょうど苦労しています・・・。

(Safari1.0/1、Opera、IE6、Mozilla対応のCSSを作成中…)

◎質問者からの返答

先ほどの方と同じのですね。でもありがとうございます。

OPERAを導入した方がいいのですか?

メイン環境がマックで、Safariで作業しているのはやっぱりバグの元でしょうか。


3 ● dim
●20ポイント

http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp

このページは、存在しないか、削除されています。

1つ目のページは本家MicrosoftのCSSの実装の変更について書かれたページです。

IE5からIE6ではこれだけの変化があったというのは今まで知りませんでしたが・・・。

参考になりそうな実験のページを2・3番目に。

CSSの各ブラウザの実装の違いは本当に違うわけですが、それはうまく解釈するのが難しいからでもあります。

厄介な要素や属性に関しては、その部分だけブラウザごとに無効にする手段が好ましいと考えます。

一応4番目に示したページの方法を用いれば、これをスマートに解決できます。

http://homepage1.nifty.com/emk/moz/browsertest.html

ブラウザのHTML4/CSS対応度テスト

http://www.fromdfj.net/html/html_css_bug.html

fromdfj.net

http://east.portland.ne.jp/~sigekazu/css/boxm.htm

注意点,ブラウザ振り分け

◎質問者からの返答

本当は振り分けできれば一番いいのですが、はてなダイアリーCSSでは単一のCSSしか指定できない(外部にサーバを借りるつもりは無いので、ほかのCSSファイルを指定することはできない)のが難点です。

いろいろ読んで行くと、かなり厳しい話になっているのが分かって来たような気がします。

>CSSの各ブラウザの実装の違いは本当に違うわけですが、それはうまく解釈するのが難しいから

ううむ。統一してくれ、と思っている人は沢山いるでしょうねえ。

勉強になります。ありがとうございます。


4 ● retlet
●20ポイント

http://www.dithered.com/css_filters/css_only/index.php

Web search

まず、Mozilla系(Netscapeも含む)、Opera、Safariといった比較的新しいブラウザでの表示は、正しいCSSの記述を心がけ、頻繁にそれぞれのブラウザで確認していけば、ほぼ問題のないレベルになると思います。

IEの表示に関しては、それとは別に考えましょう。CSSの対応状況がまったく違うので、最初の段階でIEに合わせて制作するのは非効率になります。

(*ただし、どの要素がIEの表示を狂わせているか、後から調べるのも面倒なので、表示確認だけはしておきましょう)

一番目のURLはCSSハックといわれる手法について扱ったページです。

これは、簡単に言えば各ブラウザ間のCSSの解釈の違いやバグを利用して、特定のブラウザにのみ任意のCSSプロパティを適用するといったことを可能にする手法です。

二番目のURLは、CSSハックの中でも有名な(最初に登場した?)ボックスモデルハックの手法を翻訳されているページです。

CSSハックを使えば、一つのCSSファイルの中でも振り分けが可能なので、ブラウザの解釈の違いをかなり吸収できるかと思います。

ご参考までに。

http://www6.plala.or.jp/go_west/nextcss/tip/trans/boxmodelhack_j...

日本語訳:Box Model Hack - CSS Dencitie

◎質問者からの返答

なるほど。ここまでやればIEも恐くない。

バグを利用して表示トラブルを回避するっていうのが、Windowsっぽい気がしてしまいます。(^^;)

今つまっているのが、要素に対するパディングとマージンの解釈が、ブラウザによって違うらしいことです。

こんな感じで、それぞれ向けにかければいいってことなんですね。

ありがとうございました。


5 ● 186
●20ポイント

http://www.google.co.jp/search?ie=UTF-8&q=CSS+Hack

姑息な手ではありますが、各ブラウザのバグを使った方法がありますので、ご紹介を。

CSSとしては変なものになりますが、そこには目を瞑るということで。

まずMozilla,Safari,Opera6,Opera7で大体のデザインを組んでしまいます。

この4者ならそこまで大きな違いは出ません。

次にMacIE5用の調整を行います。

-------------------------------8X

.myDiv {color:red;}

/* ¥*/

.myDiv {color:blue;}

/* */

-------------------------------8X

MacIEのみ赤、他は青という指定方法です。

本来なら/* ¥*/をコメントとする筈ですが、MacIEはうまく認識出来ず、2行目のコメントの/*から4行目の*/までをコメントとしてしまいます。

で、最後にWinIE用の調整を行います。

_hackが一番楽(Validでは無いですが)と思われるので採用すると

-------------------------------8X

.myDiv {

width:auto; /* Others */

_width:100%; /* WinIE5+ */

}

-------------------------------8X

となります。

Win版、Mac版纏めて適用させる場合は

-------------------------------8X

.myDiv {width:auto;} /* Others */

* html body .myDiv {width:100%;} /* WinIE,MacIE */

-------------------------------8X

WinIE,MacIE,MacOperaを無視したい場合は

-------------------------------8X

.myDiv {width:100%;} /* WinIE,MacIE,MacOpera */

head+body .myDiv {width:auto;} /* Others */

-------------------------------8X

テーマ化してしまうと、外部CSS・子供セレクタ等が使える為、より細かい調整が可能です。

http://www.google.co.jp/search?ie=UTF-8&q=CSS+Hack&lr=lang_ja

http://su.que.jp/slazsi/web/backslash.html

Commented Backslash MacIE5 CSS Hack - v2 の応用について

◎質問者からの返答

はてなダイアリー用のCSS Hack解説までさがしていただき、助かります。

safari用のデザインは一応終わっているので、一旦そっちへ戻して調整部分だけ書き足せばいいみたいですね。

ありがとうございます。


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ