今日のすべての主要なブラウザでWebページを正しく表示することは、非常に時間のかかる作業です。
すべてのブラウザで同じように見えるCSSスタイルを作成する簡単な方法はありますか？または、少なくとも、この作業を簡単にするためのヒントはありますか？
nicudotro
質問する
6940 次
27 に答える
33
私はすべての「リセット」提案と「グリッド」フレームワーク提案に同意しますが、少しアドバイスを追加したいと思います。クライアントを制御できないため、すべてのブラウザーで同じという目標は実際には達成できません。適切な例: フォント。
CSS でフォント スタイルを宣言しますが、一部の Linux マシン、一部の Mac、一部のモバイル ブラウザでは、指定したフォントが使用されません。この違いにより、テキストの長さと折り返しが異なります。次に、ブラウザのバージョンと、それぞれを実行しているオペレーティング システムの違いがあります。さまざまなブラウザーがズーム機能を実装する方法。また、テキスト サイズはエンド ユーザーが調整できます。同一のレンダリングは、単に達成不可能な目標です。
しかし、気を取り直してください！これは CSS の「芸術」の部分です。つまり、ブラウザー、オペレーティング システム、およびエンド ユーザーの調整の間の違いがエレガントに処理されるように、デザインを柔軟にできることです。同一のレンダリングを追求するのではなく、ブランドの一貫性 + 適切なエクスペリエンス + 柔軟性を追求する必要があります。
于 2008-09-17T17:50:51.983 に答える
9
ワークフローを次のように整理すると、無駄な時間を大幅に削減できます。
- 必ずdoc-typeを宣言してください。
- 他の人がここで言及したリセット方法の1つを使用してください。
- あなたの構造に取り組む
- 可能な場合は、同じ要素に幅とパディングを使用しないでください。
- 常に追加するのではなく、不要なHTMLとcssを減らすことを常に考えてください。
- 要素をフローティングするときは、左右のマージンを使用しないようにしてください。
これらの項目に固執すると、最も一般的な問題の多くは表示されません。
PS私が言及するのを忘れた1つの項目は、W3でバリデーターを利用することでした。
于 2008-09-17T18:29:50.267 に答える
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などのオンライン Web サイトを使用して、さまざまなブラウザーでサイトを表示することもできます。
于 2008-09-17T16:21:53.007 に答える
6
特に DIV+CSS のロープを学習している場合は特に、最初は時間がかかります。しかし、十分な練習を行い、十分な数の問題に遭遇し、それらをすべて解決した後は、何が機能し、何が機能しないかを知ることができます。
最初に可能な限り最も互換性のあるスタイルを作成する方法を理解することで、デバッグにかかる時間を節約でき、最新の主要なブラウザー (IE6、IE7、FF2、FF3、Opera 9、Safari) で問題が発生することはほとんどありません。 3 ウィン/マック。
はい、可能であり、可能な限り簡単です。それらを一つ一つ練習して克服すれば、最初の試みで物事を正しく行う方法を知ることができます.
まあ、唯一不可解なモンスターは IE6 だと思います。インブラウザです。それ以外は、ff2、ff3、opera 9、safari win/mac、ie7、ie8 のレンダリング エンジンは比較的似ており、少なくとも IE6 よりもバグがはるかに少なくなっています。
CSS の互換性を最大限に高めるためのコーディングのベスト プラクティスをいくつかご紹介します (CSS の旅を始めたばかりの方)。
- 最初にリセットを使用します。それはあなたの心をクリアにし、あなたの仕事の各ステップを確実にします。
- どのように機能するかよくわかっていない限り、同じ要素にパディング (左右) と幅を使用しないでください。
- 要素がフローティングの場合、親がまだ高さを持っていない場合は、その親にoverflow:hidden と height: 1%を指定します。
- 要素に margin-top または margin-bottom の両方を指定しないでください。margin-top または margin-bottomのみを指定してください。隣接する要素のマージンが互いに崩壊するため、初心者にとって配置がやや予測不能になります。
- 要素がフローティングの場合は、display:inlineを指定します。
- スクリプトで必要な場合を除き、z-index に依存しないでください。
- IE6 で異常が発生した場合は、その要素でheight:1%を使用してください。
私の経験によると、これらは潜在的な問題を解決するのに本当に役立つものです. それらを使用すると、時間のかかる問題に遭遇する可能性が80%なくなります。実際には、特定のタグを扱う場合には、これらよりももっと些細なヒントがありますが、それは 1 日としましょう。
于 2008-12-28T00:58:01.570 に答える
4
Yahoocss財団が役に立ちます。フォーマットを標準化するには、リセットとベースが必要になります。
于 2008-09-17T16:15:39.573 に答える
4
ここで言及されている他の人たちのように、最初にリセットを試すことができます。この css を使用して、マージンとパディングをすばやくリセットできます。
*{margin: 0; padding: 0}
css を設計するときは、標準に準拠した最新のブラウザーを使用していることを確認してください (個人的には、ブラウザー内から css を編集できる優れたWeb 開発者ツールバーを備えた firefox 3 をお勧めします)。これを行うと、すべての新しいブラウザーでサイトが適切に表示されるようになります.
発生するレイアウトの問題のほとんどは、Internet Explorer のボックス モデルの間違った解釈が原因である可能性があります。これは、幅とマージンまたはパディングを同時に設定しないことで回避できます。これは面倒に思えるかもしれませんが、そうではありません。幅が設定されている要素内のコンテンツにパディングまたはマージンを適用するだけです。
もちろん、他にも問題はありますが、これはおそらく最も一般的で厄介なものです。より具体的な問題については、いつでも Google を試すことができます。また、最近、私のサイトの視聴者が許可する場合は、IE6 およびそれ以前のブラウザーを無視することを検討しています。もちろん、多くの (クレイジー ;)) 人々がまだ IE6 を使用しているため、これは頻繁には不可能です。
また、サイトのブラウザショットをテストする必要がある場合は、無料ですぐに実行できます。
于 2008-09-17T17:51:08.613 に答える
4
適切な DOCTYPE が含まれていることを確認してください。
doctype を含めるのを忘れたために、ボックス モデルの問題に定期的に対処している人を今でも見かけます。適切な doctype がないと、Internet Explorer は "quirks モード" でレンダリングします。他のブラウザーもそれほどではありません。適切な doctype を含めると、ブラウザは「標準モード」に切り替わり、互いに非常によく似た動作をします。
それ以外に、これを生活のために行うと、IE が Firefox とは少し異なるものを解釈するなどの微妙な特殊なケースをすぐに理解して覚えることができます。ある程度の経験があれば、お気に入りのブラウザーでページ全体をデザインして、 CSS を微調整するだけで、他のブラウザでほぼピクセル パーフェクトにレンダリングできます。
于 2008-09-17T21:29:21.863 に答える
2
最初にFirefox用に開発します。他のブラウザでテストすることもできますが、Firefoxで希望どおりに機能するまで、修正について心配する必要はありません。次に、他の標準ベースのブラウザ、つまりSafariとOperaに移ります。優れたHTMLとCSSを作成した場合、これらのブラウザーで多くの作業を行う必要はありません。
次に、多くの獣、IEに移動します。条件付きコメントを使用して、特定のIEバージョンをターゲットにします。IE 7はかなり簡単なはずです。IE6の場合、簡単に機能させるには、デザインの特定の部分を犠牲にする必要があるかもしれません。これは問題ありません。IE6はもうすぐリリースされるので、完全にサポートしていなくても心配しないでください。透明なPNGは通常最大の問題であり、AlphaImageLoaderはすべての状況でうまくいくわけではありません。
前述のように、Eric MeyerのようなCSSリセットは良い出発点です。これを使用して、ニーズに基づいて独自のリセットを作成します。それ以外の答えは簡単です。特効薬はありません。
于 2008-09-18T20:53:25.000 に答える
2
私は最初にFirefoxに対して開発するのが好きで、多くの場合、リセットにYahooのYUI（およびページの基本構造にグリッド）を使用し、IEの条件付きディレクティブを使用して、IEがすべての知恵で異なる方法で処理する形式をオーバーライドします。
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" />
<!--[if gt IE 5]> <link rel="stylesheet" type="text/css" href="styles/ie.screen.foo.css" /> <![endif]-->
</head>
于 2008-09-17T16:36:39.803 に答える
2
- リセット スニペットを使用する
- Web 標準で開発する
- マークアップと CSS を検証する
- 要素の同じ部分にマージンとパディングを使用しないでください
- IE 条件を使用する
- サポートしたいすべてのブラウザーでテストする
- 何も完璧にならないことを理解してください。しかし、かなり近づくことができます。
于 2009-01-30T03:03:21.787 に答える
2
すべてのブラウザで CSS をテストします。お気に入りのブラウザーでピクセル パーフェクトを取得しても、他のブラウザーではかなりずれていることに気付くのはひどいことです。
このアプローチを採用すると、すべての主要なブラウザーで何が機能するかを簡単に理解できるようになります。
于 2008-09-17T16:16:44.703 に答える
2
ここで入手できる Eric Meyer CSS リセットを使用して成功しました。基本的に、デフォルトのブラウザー CSS スタイルの束をオーバーライドします。そうは言っても、まだ多くの違いがあります (おそらく、ボックス モデルの違いなど、あなたを悩ませているもののいくつかです。その場合、ほとんどの css を処理するためにブループリントを使用する方が良いかもしれません。
于 2008-09-17T16:18:38.180 に答える
2
CSS リセットを使用すると、すべてが同じ開始点になりますが、その開始点を超えて行う変更にはあまり役に立ちません。本当に簡単な方法があるとは言えません。1 つの解決策は、サポートしたいすべてのブラウザーで適切に機能することがわかっている限定された CSS のセットに固執することです。手の込んだ CSS の多くは実行できないかもしれませんが、CSS のデバッグ時間は大幅に短縮されるはずです。
于 2008-09-17T16:18:48.117 に答える
2
また、 Blueprintやcss-boilerplate、yui gridsフレームワークなどのcss のフレームワークを検討することもできます。通常、これらのフレームワークは、特定の定義された方法で要素をレイアウトするために要素に適用できる css クラス定義の標準セットを設定します。
于 2008-09-17T16:20:23.633 に答える
2
ピクセルパーフェクトにする必要がある場合は、スタイルシートで px を使用する必要があります。css reset stylesheetを使用してから、ピクセルに基づいてすべてのサイズを調整します。
css がさまざまなブラウザーで正しくレンダリングされるようにするには、 BrowserShotsのようなサービスが役立つかもしれませんが、すべてのブラウザーで完全な一貫性を確保することは非常に難しいと思います。
私の個人的な好みは、正しいマークアップと css を使用し、ブラウザハックを除外し、レイアウトを適切に劣化させることです。
于 2008-09-17T16:20:52.760 に答える
2
厳密な Doctype に準拠することで、多くの違いにも対処できます。また、私は通常 <div> タグを追加して本文内のすべてを囲みます。これは、firefox と body タグを最上位要素として処理する方法の違いに気付いたからです。
于 2008-09-17T16:23:20.867 に答える
2
ウェブサイトはすべてのブラウザでまったく同じに見える必要がありますか?
それとは別に、練習は完璧になると思います。そして、あなたが遭遇する可能性のある潜在的な問題について見つけることができるすべてについて読んでください. リセット ファイル、正しい Doctype、バリデータ、およびフレームワークを使用すると、ある程度は役立つかもしれませんが、最終的にはコードを制御でき、コードをどのように表示したいかを正確に把握できるのは自分だけです。コードは有効で、ブラウザーはユーザーが指示したとおりに動作する可能性がありますが、それでもユーザーが望んでいるようには見えません。
レイアウト目的で CSS を使用すればするほど、遭遇する問題が増え、回避する方法が見つかり、より多くのことを学ぶことができます。構造化されたセマンティックな HTML と整頓された CSS を使用して完全にレイアウトを作成するようになってから数年が経ちましたが、ブラウザの欠陥を修正するために多くの時間を費やす必要はほとんどありません。
于 2009-01-30T02:22:20.420 に答える
0
あなたは間違った質問をしている、なぜならこれがそれに答える唯一の方法だからだ：
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
あまり答えはありませんね。:)
他のすべての人がここにいます-CSSをすべてのブラウザで機能させ、同じように見せようとしないでください。できません。
于 2008-12-28T01:40:35.870 に答える
0
Yahooユーザーインターフェイス（YUI）には、すべてのブラウザーで共通のベースラインを形成しようとするCSSリセットの実装があります。これでかなり近づくはずです。
于 2008-09-17T16:16:17.623 に答える
0
これは本当に答えるのが難しい質問です。すべてのブラウザですか? これはすべてのバージョンを意味しますか? モバイルブラウザ？「メインライン」のもの (opera、firefox、ie、safari) だけですか?
CSS レベル 1 の内容に完全に準拠することすらできないため、いくつかの調整が必要になります。私の経験では、opera、firefox、および safari は、基本的なもの (ポジショニング、フロート、div など) に関してはすべて同様に動作し、微調整する必要があるのは IE だけです。
yahoo grids ( http://developer.yahoo.com/yui/grids/ ) のようなテスト済みの CSS ライブラリまたはフレームワーク、または google の Web ツールキット ( http://code.google.com/webtoolkit/ ) のようなプログラム インターフェイスを使用することもできます。 ）。
于 2008-09-17T16:16:41.740 に答える
0
フロートを使用してページをボックスにレイアウトすると、見た目が同じ CSS になることがよくあります。フロー モデルは期待どおりに機能し、すべての主要なブラウザーで忠実にレンダリングされます。多くのフロートを使用するのは間違っていると言う人もいると思いますが、驚くほどうまく機能します。
于 2008-09-17T16:17:40.520 に答える
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-17T16:21:59.980 に答える
0
Blueprintと960 Grid Systemをご覧になることをお勧めします。
リセットを行い、Internet Explorer の CSS を修正するだけでなく、デザイン グリッドを簡単に操作できるようにすることで、CSS ベースのレイアウトを構築する際の面倒な調整の多くを処理してくれます。
于 2008-09-17T16:22:59.400 に答える
0
私は通常、W3C CSS バリデーターに対して開発を行い、それぞれのブラウザーで希望どおりに表示されることを確認します。検証は、一貫した動作に向けて大いに役立ちます。
場合によっては、対象とする主要なブラウザーで適切に検証および表示されるスタイルのみにページを削除することもあります。
于 2008-09-17T18:45:22.960 に答える
0
css フレームワークは確かに役立ちますが、必要のない、または使用しないスタイルが山ほどあるため、簡単に重くなる可能性があります。
CSS ハックを使用せずに IE のバージョン固有のスタイルをフィードするための優れたテクニックについては、Targeting IE Using Conditional Comments and Just One Stylesheet over at Position is Everything を確認してください 。これにより、ブラウザーではなくセレクターごとにスタイル ルールをまとめることができます。
于 2008-09-17T18:50:34.600 に答える
-1
デザイン ティンフォイル ハットの適用
CSS:
*{display:none}
于 2008-10-17T00:25:30.190 に答える