HTML5和CSS3：如何确保我的代码与所有浏览器兼容？

Question

Whenever I am working with webdesign every browsers shows something different which ruins the layout. Is there any tools or guidelines to make a webdesign without any problems?

Thanks in advance!

Answer 1

There are a lot of different tools and technologies that can help make this better/easier but nothing beats good old cross-browser testing. Here are some tools you might like:

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

Answer 2

I don't think that all designs must look the same in all browsers. It's nearly impossible with the growing range of browsers and devices that must be supported, but I understand that things shouldn't break.

This might require a case-to-case basis, but some things to look into are:

1. Use HTML5 Shiv so IE browsers can recognize HTML5 elements: http://code.google.com/p/html5shiv/
2. You could also look into HTML5 Boilerplate but that could be overkill http://html5boilerplate.com/
3. In the design process, make sure any CSS3 properties are not so critical to design that they break it.

Answer 3

显然你必须为每种特定类型的浏览器调整设计。

Answer 4

使用CSS框架（如http://twitter.github.com/bootstrap/或http://documentcloud.github.com/backbone/）肯定可以帮助完成此过程。

Answer 5

如果你开始使用CSS重置 （这是另一个 ）或一些HTML样板，你至少可以减少使用不同浏览器的大部分奇怪之处。

Answer 6

Grab Modernizr for a start, which uses selectivizr I believe!

For Li's I would use

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

Double margins: fix those with IE conditional stylesheet OR html5boilerplate

Most other elements would depend on display type

For CSS3 maybe use CSSPie

Clears:

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

Some of the other issue's are fixed quite easily!

For screen width's use % instead of PX for greater control