HTML5＆CSS3：コードがすべてのブラウザと互換性があることを確認するにはどうすればよいですか？

Question

ウェブデザイナーで作業しているときはいつでも、ブラウザごとに違うものが表示され、レイアウトが失われます。ウェブデザインを問題なく作成するためのツールやガイドラインはありますか？

ありがとうございます！

Answer 1

明らかに、ブラウザの種類ごとにデザインを調整する必要があります。

Answer 2

http://twitter.github.com/bootstrap/やhttp://documentcloud.github.com/backbone/などのCSSフレームワークを使用すると、そのプロセスで確実に役立ちます。

Answer 3

CSS reset（ここではanother one）またはHTML boilerplateで始めると、少なくとも異なるブラウザでほとんどの奇妙さを減らすことができます。

Answer 4

これをより良く/より簡単にするためのさまざまなツールと技術がありますが、古いクロスブラウザテストに勝るものはありません。ここではいくつかのツールは、あなたが好きかもしれないです：私は信じているselectivizrを使用して開始、ため

• http://browsershots.org/
• http://spoon.net/Browsers/
• http://www.modernizr.com/

Answer 5

グラブModernizrを！李さんのために

私は

li{ 
    display: inline-block; //NO Floats 
    *display: inline; /* < target IE7 */ 
    *zoom:1; 
} 

ダブル余白を使用します：IEの条件付きスタイルシートOR html5boilerplateとのそれらを修正

他のほとんどの要素が多分CSSPieを使用CSS3についてdisplayタイプ

に依存するであろうが

のクリア：

:after{ 
    content: '.'; 
    clear:both; 
    visibility: hidden; 
    *zoom:1; 
    height:0; 
    display:block; 
} 

他の問題のうちのいくつかは非常に簡単に固定されています！代わりに、より大きな制御

Answer 6

用PXの画面幅の使用％の

私はすべてのデザインは、すべてのブラウザで同じように見なければならないとは思いません。サポートが必要なブラウザやデバイスが増えていく中では、ほとんど不可能ですが、問題は解決しないはずです。

このケース - ケース根拠を必要とするが、に見ていくつかのものがあるかもしれません：あなたはまた、HTML5に見ることができhttp://code.google.com/p/html5shiv/

：そのIEのブラウザはHTML5の要素を認識することができ

1. 使用HTML5シヴボイラープレートだが、それは過剰なものになる可能性があるhttp://html5boilerplate.com/
2. デザインプロセスでは、CSS3のプロパティーが設計上重要でないことを確認してください。