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

Question

每当我使用网页设计时，每个浏览器都会显示不同的内容，这会破坏布局。是否有任何工具或指南可以毫无问题地进行网页设计？

提前致谢！

Answer 1

有许多不同的工具和技术可以帮助使这更好/更容易，但没有什么比旧的跨浏览器测试更好。以下是您可能喜欢的一些工具：

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

Answer 2

我不认为所有设计在所有浏览器中看起来都一样。随着越来越多的浏览器和设备必须得到支持，这几乎是不可能的，但我知道事情不应该破坏。

这可能需要个案基础，但有些事情需要考虑：

1. 使用HTML5 Shiv，以便IE浏览器可以识别HTML5元素：http://code.google.com/p/html5shiv/
2. 您还可以查看HTML5 Boilerplate，但这可能是过度杀伤http://html5boilerplate.com/
3. 在设计过程中，确保任何CSS3属性都不是那么重要，以至于它们会破坏它。

Answer 3

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

Answer 4

使用http://twitter.github.com/bootstrap/或http://documentcloud.github.com/backbone/等CSS框架肯定有助于此过程。

Answer 5

如果您从CSS reset（此处为another one）或某些HTML boilerplate开始，至少可以减少使用不同浏览器的大部分奇怪现象。

Answer 6

Grab Modernizr开始使用选择性我相信！

对于Li，我会使用

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

双边距：使用IE条件样式表或html5boilerplate修复那些

大多数其他元素都取决于display类型

对于CSS3 ，可以使用CSSPie

<强>清除：

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

其他一些问题很容易修复！

对于屏幕宽度，使用％代替PX以获得更好的控制