すべてのブラウザでCSSを同じようにレンダリングする最も簡単で最速の方法は何ですか

33

：目標はすべてのブラウザで同じです。クライアントを制御することができないため、は実用的ではありません。ケース・イン・ポイント：フォント。

あなたはCSSでフォントスタイルを宣言していますが、一部のLinuxマシン、一部のMac、一部のモバイルブラウザでは、指定したフォントがありません。この変更により、テキストの長さとラッピングが異なります。次に、それぞれのブラウザのバージョンとオペレーティングシステムの違いがあります。さまざまなブラウザがズーム機能をどのように実装しているか。テキストサイズはエンドユーザが調整することができます。同一のレンダリングは、達成不可能な目標です。

しかし、心を持ちなさい！これはCSSの「芸術的」な部分です。ブラウザ、オペレーティングシステム、およびエンドユーザの調整の違いがエレガントに処理されるように、デザインに柔軟に対応できること。あなたはブランドの一貫性+適切な経験+柔軟性のために努力すべきです。あなたはここに言及したいくつかの他の人のように、あなたはCSSのこの作品で迅速なマージンとパディングのリセットを行うことができ、リセットを試みることができるすべての

出典

2008-09-17 17:50:51

+2

同じフォントでも、フォントの一貫性が失われます。 DPIの設定の違いは、比例したものを吹き飛ばす可能性があり、すべてのWindowsマシン上でfirefoxで動作するデザインを持つことができますが、すべてのLinuxマシンで壊れています。 –

+2

ポイントをもう少し深めてみると、ウェブは本質的に異種である。つまり、ウェブにアクセスするユーザーエージェントはすべて異なっている。これに反して、すべてのエージェントで同じものを見て、同じように振る舞うのは間違いです。 – roryf

+0

もっと同意できませんでした。それは「固定された高さ」のレイアウト（シャダー）で終わる滑りやすい斜面です。 – da5id

12

eric meyer resetまたはYUI resetのようなCSSリセットを試してみてください。すべてのブラウザで同じものを同じに見せるための簡単で完璧な方法はありません。

出典

2008-09-17 16:15:12

4

Yahoo css foundationが役に立ちます。フォーマットを標準化するには、リセットとベースが必要です。

出典

2008-09-17 16:15:39 Martynnw

0

Yahoo User Interface（YUI）は、すべてのブラウザで共通のベースラインを形成しようとするCSS Resetの実装を備えています。これはあなたをかなり近づけるはずです。

出典

2008-09-17 16:16:17 foxxtrot

0

これは本当に答えが難しい質問です - すべてのブラウザ？これはすべてのバージョンを意味しますか？モバイルブラウザ？ちょうど "メインライン"のもの（オペラ、ファイアーフォックス、すなわちサファリ）？

CSSレベル1のものには完全に準拠しているわけではありません。そのため、いくつかの調整が必要になります。私の経験では、基本的なもの（ポジショニング、浮動小数点、divsなど）に関しては、オペラ、ファイアフォックス、サファリのすべてが同様に動作し、IEの場合は微調整する必要があります。

yahooグリッド（http://developer.yahoo.com/yui/grids/）やgoogleのWebツールキット（http://code.google.com/webtoolkit/）などのプログラマティックインターフェイスのような、テスト済みのCSSライブラリやフレームワークを使用することもできます。

出典

2008-09-17 16:16:41

+0

大半を除いて必ずしもすべてではありません – nicudotro

2

すべてのブラウザでCSSをテストしてください。あなたのペットのブラウザで完璧なピクセルにすることは、それが他のブラウザでは見劣りしていることを知るためにはひどいことです。

このアプローチをとることで、主要なブラウザすべてで動作するものを理解しやすくなります。

出典

2008-09-17 16:16:44 Larsenal

0

フロートを使用してページをレイアウトすると、同じようなCSSが表示される傾向があります。フローモデルは、あなたが思うように動作し、すべての主要なブラウザで忠実にレンダリングされます。多くのフロートの使用は間違っていると言われる人もいますが、それは驚くほどうまく機能します。

出典

2008-09-17 16:17:40

+0

浮動小数点数に同意します。私は最近、フロートを使ってポートフォリオのWebサイト（かなり複雑なCSS）を作っていました。そして、ブラウザで確認したところ、驚きました。 IE6を除くすべてのブラウザで同じように表示されていました。 – Dmitris

2

私は、Eric MeyerのCSSリセットを利用して成功しましたhereです。基本的に、デフォルトのブラウザCSSスタイルをオーバーライドします。あなたのCSSの大部分を扱うのにBlueprintを使用するほうが良いかもしれません。

出典

2008-09-17 16:18:38

+0

Blueprintは新しいURLを持っています：http://www.blueprintcss.org/ – Colin

2

CSS Resetを使用すると、すべての開始点が同じになりますが、開始点を超えて行った変更にはあまり役に立ちません。実際には簡単な方法はありません。あなたがサポートしたいすべてのブラウザでうまく動作することを知っているCSSあなたが好きなCSSのものをたくさんできるわけではないかもしれませんが、CSSのデバッグ時間はかなり遅くなるはずです

出典

2008-09-17 16:18:48 Kibbee

2

また、例えば、Blueprintまたはcss-boilerplateやyui gridsフレームワーク。通常、これらのフレームワークは、特定の定義された方法で要素をレイアウトするために要素に適用できる標準的なCSSクラス定義のセットを提供します。

出典

2008-09-17 16:20:23

2

ピクセルに完全である必要がある場合は、スタイルシートでpxを使用する必要があります。css reset stylesheetを使用して、ピクセルに基づいてすべてのサイズを設定します。

あなたのCSSが異なるブラウザで正しくレンダリングされるようにするには、BrowserShotsのようなサービスが役立つかもしれませんが、すべてのブラウザにわたって絶対的な一貫性を得ることは非常に難しいでしょう。

私の個人的な好みは、適切なマークアップとCSSを使用し、ブラウザハックを除外し、デザインのレイアウトを適切に低下させることです。

出典

2008-09-17 16:20:52 Codebeef

7

私はいつも

をFirefoxなどのW3C完全準拠のブラウザで動作する基本的なCSSスタイルシートを作成し、他のブラウザで任意のスタイリングの問題を修正するための代替ブラウザ固有のスタイルシートを作成し、すなわちIE6、IE7などしましたHTML内で次のコードを使用して、適切なIEスタイルシートを選択することができます。

<!--[if lte IE 6]> 
<link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" /> 
<![endif]-->

また、別のブラウザでサイトを表示するためにこのようなbrowsershotsなどのオンラインのウェブサイトを使用することができます。

出典

2008-09-17 16:21:53

0

このようなことが完全に機能するという保証はありません。ブラウザの開発者が、「標準的な」やり方ではなく、独自のやり方を見つける限り、違いがあります。

私はYahoo User Interface Base CSSを使用して肯定的な結果を出しましたが、結局はCSSで可能なより複雑な項目に対処できませんでした。

最終的に私は完璧ではないソリューションに行き、ブラウザ固有のスタイルシートを設定していればフレームワークチェックを行いました。

ここに示すのは、PHPの抜粋です。言語固有のソリューションのため申し訳ありませんが、私はアイデアが異なる言語で実装するのに十分明確であると思います：いいえ見つからないファイル、未認識タグや一部のブラウザをチョークかもしれない他のコードから、ページと

$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sStyle."\" />\n"; 
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension)) 
    $sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."\" />\n"; 
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension)) 
    $sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."\" />\n";

フレームワークは、クライアントから要求されたすべてのブラウザでレンダリングしたいのでレンダリングします。さらに重要なことは、実際にエラーに遭遇したときにデバッグを行うエラー（つまり、FireFoxの空のエラーコンソール）を生成することなく、そうすることです。

出典

2008-09-17 16:21:59 Twan

0

Blueprintと960 Grid Systemをご覧ください。

Internet Explorer用のCSS修正を含むほかに、CSSベースのレイアウトを構築するときに面倒な調整を行うデザイングリッドで簡単に作業できます。

出典

2008-09-17 16:22:59 berberich

2

厳密なdoctypeに従うことで、多くの相違点も処理されます。また、本体内のすべてを囲むために、一般に< div>タグを追加しました。これは、firefoxとボディタグをトップレベル要素として扱う方法の違いに気づきました。

出典

2008-09-17 16:23:20

2

私は、多くの場合、リセット（およびページの基本的な構造のためのグリッド）のためのYahooのYUIを使用して、そのIE、そのすべての– -裾で –知恵フォーマットを上書きするためにIEの条件付きディレクティブを使用して、最初のFirefoxに対して開発したいと別の方法で処理します。

indexです。HTML

私はすべての「リセット」の提案と「グリッド」の枠組みの提案に同意するが、私はアドバイスのビットを追加したいんでした
<head> <link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" /> <link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" /> <link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" /> <link rel="stylesheet" type="text/css" media="print" href="styles/print.foo.css" />

 </head>

出典

2008-09-17 16:36:39 micahwittman

4

まず：

*{margin: 0; padding: 0}

あなたのCSSが使用することを確認してくださいデザイン現代のスタンダード準拠のブラウザを使用しています（個人的には、あなたのブラウザ内からCSSを編集できる優れたweb developer toolbarを持つfirefox 3をお勧めします）。これを行うと、確かにすべての新しいブラウザであなたのサイトを大丈夫に見せてくれるでしょう。

ほとんどのレイアウト上の問題は、ボックスモデルのInternet Explorerのwrong interpretationによって引き起こされている可能性があります。これを回避するには、幅とマージンを同時に設定しないでください。これは迷惑なように思えるかもしれませんが、幅が設定されているエレメントの内側にあるコンテンツに、パディングやマージンを適用するだけです。

もちろん、より多くの問題が存在しますが、これはおそらく最も一般的で迷惑なものです。より具体的な問題については、常にGoogleを試すことができます。また、最近私は、IE6を使用している人を見つけることができないウェブデザインサイトで、私のサイトの視聴者が許可している場合、IE6以上のブラウザを無視することを検討しています。もちろん、多くの（クレイジー;））人々はまだIE6を使用しているので、これは頻繁に可能ではありません。

また、サイトをテストする必要がある場合は、browsershotsをすばやく簡単に実行できます。

出典

2008-09-17 17:51:08 jelmer

+0

私の仕事では、IE6またはNN4のみを使用できます。狂っていない、私たちは強制されています。 :) – rball

+0

IMOは強制的に職場での虐待の一種としてIE6のカウントを使用しています。 ;） – DisgruntledGoat

9

次のように作業フローを整理すれば、時間を無駄にすることが少なくなります。

にdoc-typeを宣言してください。
ここで述べたリセット方法の1つを使用してください。
あなたの構造上での作業
可能な限り同じ要素に幅とのパディングを使用しないでください。
いつも追加するのではなく、不要なHTMLやCSSを減らすことを常に考えてください。
浮動要素の左右に余白を使用しないでください。

これらの項目に固執すると、よくある問題の多くが表示されません。

PS私が言いたいことを忘れた1つのアイテムは、W3のバリデーターを利用したものでした。

出典

2008-09-17 18:29:50

0

私は通常W3C CSS validatorに対して開発して、それぞれのブラウザで私が望むように見えるかどうかを確認します。妥当性検証は、一貫性のある動作に向けて大きく進んでいます

時々、私がターゲットとしている主要なブラウザで正しく検証されて表示されるスタイルにのみページを移動しますが、他のポスターと同じようにブラウザ固有の調整を追加することもあります。

出典

2008-09-17 18:45:22 davenpcj

0

CSSのフレームワークは確かに役に立ちますが、必要としないスタイルのヒープのために簡単に重くなる可能性があります。

チェックアウト Targeting IE Using Conditional Comments and Just One Stylesheet at the Position isは、CSSハックを使用せずにIEのバージョン固有のスタイルをフィードする素晴らしい技術です。これにより、ブラウザではなくセレクタでスタイルルールをまとめておくことができます。

出典

2008-09-17 18:50:34

4

適切なDOCTYPEが含まれていることを確認してください。

Doctypeを含めるのを忘れているので、ボックスモデルの問題に定期的に対処している人はいます。適切なdoctypeがなければ、Internet Explorerは「quirksモード」でレンダリングを行い、他のブラウザも同様にしてより少ない程度でレンダリングします。適切なdoctypeを含めると、ブラウザは「標準モード」に切り替わり、お互いに非常によく似た動作をします。

それ以外の場合は、これをリビングで行うとすぐに、IEがFirefoxとは少し違ったことを解釈する微妙なコーナーケースを覚えていきます。いくつかの経験では、あなたの好きなブラウザでは、ほとんどのピクセルを他のブラウザで完璧にレンダリングするように、CSSを微調整するだけです。

出典

2008-09-17 21:29:21 warp

2

最初にFirefox用に開発してください。他のブラウザでもテストすることができますが、修正プログラムがFirefoxでどのように機能するかは心配しないでください。その後、他の標準ベースのブラウザ、つまりSafariとOperaに移行します。良いHTMLとCSSを書いていれば、これらのブラウザで多くの作業をする必要はありません。

その後、IEの獣に移動してください。特定のIEバージョンをターゲットにするには、条件付きコメントを使用します。 IE 7はかなり簡単に使えるはずです。IE 6では、デザインを簡単に機能させるためには、デザインの特定の部分を犠牲にしなければならない場合があります。これは問題ありません。IE 6が出ていますので、完全にサポートしていなければ心配しないでください。透明なPNGが通常最も大きな問題です.AlphaImageLoaderはあらゆる状況でこのトリックを実行しません。

前述したように、Eric Meyer'sのようなCSSリセットは、あなたのニーズに基づいて独自のリセットを構築するのに適しています。それ以外の答えは簡単です：銀の弾丸はありません。デザインアルミ箔ハットを適用

出典

2008-09-18 20:53:25 roryf

-1

CSS：

*{display:none}

出典

2008-10-17 00:25:30

+0

OK、それは完全にクロスブラウザではありません。すべてのブラウザがCSSをサポートするわけではありません。 –

5

それは時間あなたがDIV + CSSのロープを学ん減勢されている場合は特に、最初にかかるものです。しかし、あなたが十分な練習をして問題を十分に満たし、それらをすべて解決した後、あなたは何が働いているのか、何がうまくいかないのかを知ることになります。

これは、最初に可能な最も互換性の高いスタイルを書く方法を知っているので、デグ詰めですべての時間を節約し、主要な現代的なブラウザのほとんどすべての問題を抱えていることはほとんどありません：IE6、IE7、FF2、FF3、 Opera 9、Safari 3 Win/Mac。

はい、可能な限り簡単に入手できます。練習して一つずつ征服すれば、最初の試みで正しいことをする方法を知ることができます。

邪魔な怪物はIE6でなければなりません。それはインブラウザーです。それ以外のff2、ff3、opera 9、safari win/mac、ie7、ie8はレンダリングエンジンではIE6よりもはるかに少ないバグで、比較的似ています。

私は最大のCSSの互換性を得るために、コーディングに（ちょうどCSSにおける彼らの旅を始めている1）あなたのためのいくつかのベストプラクティスを持っている：

が最初resetを使用してください。それはあなたの心をクリアし、あなたの仕事の各ステップを確実にします。
どうすればうまくいくかわからない限り、同じ要素にパッド（左右）と幅を使用しないでください。
要素がフローティングされている場合は、親にまだ高さが設定されていない場合は、その親にオーバーフロー：隠し、高さ：1％を与えます。
マージン・トップまたはマージン・ボトムの両方に要素を指定しないでください。では、マージン・トップまたはマージン・ボトムのみを指定してください。隣接する要素のマージンが互いに崩壊するため、初心者のためにポジショニングがいくらか予測できなくなります。
要素がフローティングされている場合は、の表示：インラインとします。
スクリプトで必要とされない限り、Zインデックスに頼らないでください。
IE6で不思議なことが起こった場合は、その要素にの高さ：1％を使用してください。

私の経験によれば、潜在的な問題を解決するのに本当に役立つものです。それらを使用して、80％で時間のかかる問題に遭遇する可能性を排除します。実際には、特定のタグを扱うときにはこれらよりも些細なヒントがありますが、それを1日と呼びましょう。ここでその答えをするための唯一の方法だからあなたは、間違った質問をしている

出典

2008-12-28 00:58:01

0

：答えの

<!DOCTYPE html> 
<html> 
<head> 
    <style>* { background: #fff }</style> 
</head> 
<body></body> 
</html>

あまり、それを何ですか？ :)他

誰もが、右ここにある - それは同じを見作るしようとしないで、すべてのブラウザでCSS 作業を作ります。できません。それとは別に

出典

2008-12-28 01:40:35 flussence

2

Do websites need to look exactly the same in every browser?

、私は実際には最適ですね。あなたが遭遇する可能性のある問題について、あなたが見つけることができるすべてについて読むことができます。リセットファイルを使用すると、正しいdoctype、バリデーター、フレームワークがある程度助けになるかもしれませんが、最後にがコードを制御しています。のようになります。コードは有効かもしれないし、ブラウザはあなたが言ったことを正確に行うかもしれないし、あなたが望むもののように見えない。

レイアウトの目的でCSSを使用すればするほど、問題が発生するほど問題が多くなり、学習するほど多くの問題が発生します。構造化された意味論的なHTMLときちんとしたCSSで完全にレイアウトを作成してから数年後、私はたった1つまたは別のブラウザの欠陥を修正するのに多くの時間を費やさなければなりませんでした。

出典

2009-01-30 02:22:20

2

Web標準で開発リセットを使用し
スニペット
要素の同じ部分
使用IEの条件文
を検証
あなたがサポートしたいすべてのブラウザでテストしてください
ノッチはになると理解していますが、ですが、yoあなたはかなり近づくことができます。

出典

2009-01-30 03:03:21 dylanfm

すべてのブラウザでCSSを同じようにレンダリングする最も簡単で最速の方法は何ですか

答えて

関連する問題