跨浏览器兼容的重要性技巧
如今每个人都使用不同的浏览器。受欢迎的选择，如Firefox，Safari，Chrome和IE浏览器，占近98%的市场份额的互联网浏览器，以及其他鲜为人知的浏览器如Konqueror，有众多的浏览器来查看您的网站。

如何让您的网站的功能在所有这些选项？重要的是，你的网站可以在所有主要媒体上使用，无论是流行的浏览器，移动设备，或任何其他的网页浏览设备。在本文中，我们将介绍一些基本知识，确保您的站点是跨浏览器兼容的，包括片段和资源，以帮助您前进。

问题

不是每个人都使用相同的浏览器。类似于每个人在不同的操作系统上运行的方式，您不能期望所有人都使用相同的Web浏览工具。

那么有什么选择呢？有关当前浏览器份额的数据根据来源和地区而有所不同，但总的来说，IE浏览器、火狐浏览器、Chrome浏览器、Safari和Opera占据了大部分市场份额，IE浏览器占据了市场。Internet Explorer 8有超过25%的市场份额，IE浏览器6有215，IE浏览器7有14%。

当有这么多不同的选择，每一个运行自己的渲染引擎，你如何确保你的网页设计或应用程序将在每一个？这就是我们希望涵盖的内容，并为本文提供解决方案。

你的站点如何运行？

那么，目前的站点在众多浏览器中如何运行呢？为什么不亲自检查一下呢？如果你不想在自己的个人电脑上安装所有的主要浏览器，这里有一些资源可以帮你摆脱困境。

Adobe浏览器实验室

Adobe BrowserLab提供查看您的网站截图一个很棒的解决方案的需求。这通常是我去在不同的浏览器进行测试程序。

Adobe浏览器实验室

Browsershots

在很多不同的浏览器使你设计的网站截图。在你提交你的URL后，它会给你一个URL，在那里你的截图会被加载。

Browsershots

浏览器沙箱

运行一个应用程序来查看您的网站在各种浏览器。

浏览器沙箱

browsrcamp

允许你测试你的设计与Mac浏览器的兼容性。

browsrcamp

IE测试仪

一个免费的浏览器允许你检查你的网站看起来像IE8，IE7 IE 6和IE5.5在Windows 7，Vista和XP。

IE测试仪

浏览器校对你的站点

所以结果表明你的网站在所有主要浏览器上都没有达到预期的功能。不必担心，这种事我们大家都是难免的。现在是时候去修理它。

验证

首先，确认你的站点。清除这些XHTML和CSS错误通常可以解决那些讨厌的浏览器bug。我建议运行您的网站通过W3的XHTML验证器和CSS验证器。

CSS重置

另一个确保站点跨浏览器兼容的好方法是在工作一个项目之前总是重置CSS。有许多不同的全球CSS重置，但Eric Meyer的一个和雅虎的一个被认为是最正确的：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

YUI’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
fieldset,img {
        border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
}
ol,ul {
        list-style:none;
}
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}
q:before,q:after {
        content:'';
}
abbr,acronym { border:0;}

包括他们的CSS重置样式在样式表的顶部，或有雅虎主机和简单的链接在你的HTML文件，就在你自己的样式表：

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

条件语句

另一种确保站点跨浏览器兼容的流行方法是使用条件语句来定位特定的浏览器。基本上，这个想法是检测用户的浏览器，如果它是指定的浏览器之一，它应该执行某种动作。

一个条件语句的最常见的用途是包括一个样式表如果浏览器是Internet Explorer。通过这样做，你可以正确的在你的代码中存在一些漏洞和超越你当前的样式表。

使用条件语句，只要包含在你的XHTML头部声明，右下方的样式表包含。