異なるブラウザ間での表示に強い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に関しては、インライン系の要素の場合は完全にパディングは無視される」ことは知っています。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/10/04 00:59:37
  • 終了:--

回答(6件)

id:kddi No.1

KDDI回答回数277ベストアンサー獲得回数22004/10/04 01:13:03

ポイント20pt

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

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

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

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

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

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

id:Yuny

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

2004/10/04 02:03:17
id:Ohnishi No.2

nix回答回数2ベストアンサー獲得回数02004/10/04 01:55:24

ポイント20pt

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を作成中…)

id:Yuny

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

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

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

2004/10/04 02:05:46
id:dim No.3

dim回答回数178ベストアンサー獲得回数02004/10/04 01:58:21

ポイント20pt

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://east.portland.ne.jp/~sigekazu/css/boxm.htm

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

id:Yuny

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

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

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

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

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

2004/10/04 02:15:50
id:retlet No.4

retlet回答回数6ベストアンサー獲得回数02004/10/04 02:39:39

ポイント20pt

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

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

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

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

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

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

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

ご参考までに。

id:Yuny

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

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

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

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

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

2004/10/04 13:43:42
id:smoking186 No.5

186回答回数74ベストアンサー獲得回数62004/10/04 08:28:50

ポイント20pt

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

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://su.que.jp/slazsi/web/backslash.html

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

id:Yuny

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

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

ありがとうございます。

2004/10/04 13:53:41
id:ogrenavi No.6

ogrenavi回答回数161ベストアンサー獲得回数92004/10/04 10:36:58

ポイント20pt

ブラウザ間の違いについては1番の方の回答の

「CSSバグリスト@CSSバグ辞典スレッド」が詳しいので、

振り分け方法の1つを紹介します。

はてなダイアリーの場合は、Yunyさんがおっしゃっているように、

単一のCSSしか指定できないので振り分け以外の方法をとる必要がありますよね。

参考URLで紹介している「CSS_Hacks」(CSSハック)という手法は、CSSのコメントバグ等を

利用して各ブラウザで同一の表示をさせようという方法です。

こちらの方法であれば単一のCSSで対応可能です。

「CSS_Hacks」の上位のページ(

http://su.que.jp/

Su-5: Full Table of Contents

)にもいろいろかかれていますので

興味があればご覧ください。

http://su.que.jp/

Su-5: Full Table of Contents

id:Yuny

この種の方法がいいみたいですね。

じっくり研究させていただきます。

皆さんありがとうございました。そろそろ締め切らせていただきます。

2004/10/04 13:54:58
  • id:honera
    うちではあきらめて

    CSSをPHPを利用してブラウザ毎に差し替えています。
    正直複数のブラウザを見て此方を立てればあちらが立たずを
    やるより、それぞれに別々のCSS送った方が場合によっては楽です。
    そして此によってどうせCGIで生成して居るんだからと言うことで
    ユーザーによる表示デザイン選択なんてものも実装可能に成りました。

    ブラウザのキャッシュのおかげでCSSはそれほど頻繁には読まれないので、
    負荷もそれほどには気になりません。
  • id:Yuny
    Re:うちではあきらめて

    なるほど、結局は。妥協するか、使い分けるか、という所なんですね。
    いま困っている事はIE5のマージンとパディングの絡みなので、これくらいならバグを利用したCSSで回避できるかもしれないと思っているところです。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません