HTML5 & CSS3:如何确保我的代码与所有浏览器兼容?

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?

每当我使用webdesign时，每个浏览器都会显示不同的内容，这会破坏布局。有没有什么工具或指导方针可以让网页设计没有任何问题?

Thanks in advance!

提前谢谢!

6 个解决方案

#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://browsershots.org/
http://spoon.net/Browsers/
http://spoon.net/Browsers/
http://www.modernizr.com/
http://www.modernizr.com/

#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:

这可能需要个案对个案的基础，但要研究的一些事项是:

Use HTML5 Shiv so IE browsers can recognize HTML5 elements: http://code.google.com/p/html5shiv/
使用HTML5 Shiv让IE浏览器可以识别HTML5元素:http://code.google.com/p/html5shiv/
You could also look into HTML5 Boilerplate but that could be overkill http://html5boilerplate.com/
您还可以查看HTML5的样板文件，但这可能会被过度使用http://html5boilerplate。com/。
In the design process, make sure any CSS3 properties are not so critical to design that they break it.
在设计过程中，确保任何CSS3属性对设计来说都不是那么重要，因此它们会破坏设计。

#3

Apparently you have to tweak the design for each specific type of browser.

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

#4

Using a CSS framework such as http://twitter.github.com/bootstrap/ or http://documentcloud.github.com/backbone/ can certainly help in that process.

使用诸如http://twitter.github.com/bootstrap/或http://documentcloud.github.com/backbone/这样的CSS框架肯定会对这个过程有所帮助。

#5

If you start with a CSS reset (here is another one) or some HTML boilerplate you can, at least reduce most of the oddities with different browsers.

如果你从CSS重置开始(这里是另一个)或一些HTML样板文件，至少可以减少大多数不同浏览器的怪异。

#6

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

抓住现代化的开始，我相信它使用了selectivizr !

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

双边距:用IE条件样式表或html5boilerplate修正

Most other elements would depend on display type

大多数其他元素将取决于显示类型

For CSS3 maybe use CSSPie

对于CSS3，可以使用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

对于屏幕宽度使用%而不是PX进行更大的控制

#1