Question

我问的原因是因为我完成了一个可爱的主页设计并且只在osx上浏览了chrome和safari的网站然后我决定打开firefox并且某些事情破了。

我搜索字段占位符文本显示错误颜色的问题也消失了，并且我在firefox中的样式表中显示了正确的颜色。

如果我可以为不同的浏览器创建单独的样式表，或者具有根据浏览器触发正确设置的条件语句，那将会很棒。

另外，一个很棒的工具可以在多个浏览器中手动查看我的网站。

Answer 1

有些人更喜欢使用 CSS重置文件来解决此问题。基本上，这会建立一个中立的起点，以便您应用的任何CSS在所有浏览器上都具有相同的，可预测的结果。

最简单的版本之一，它将为您提供概念的一般概念，是：

* {
     padding:0;
     margin:0;
   }

在this SO question的答案中有很多关于此问题的讨论。

和here is a roundup of links各种常见方法。

修改：要在各种浏览器中进行测试，请查看this popular SO question和this one。

Answer 2

由于IE通常存在问题，因此有一个解决方案。
您可以放在head标签内的下一行只有在使用IE7时才会加载特定的CSS

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="http://your.css/my.css" />
<![endif]-->

其他IE的方法相同。

Answer 3

如果您使用javascript，则可以将此代码段放在head标记中以检测用户代理

<script type="text/javascript">
var browser={
    msie:navigator.userAgent.indexOf('MSIE') > -1 ? true : false,
    chrome:navigator.userAgent.indexOf('Chrome') > -1 ? true : false,
    opera:navigator.userAgent.indexOf('Opera') > -1 ? true : false,
    firefox:navigator.userAgent.indexOf('Firefox') > -1 ? true : false
}
if(browser.msie) document.write("<link REL='stylesheet' HREF='msie.css' TYPE='text/css'>");
if(browser.chrome) document.write("<link REL='stylesheet' HREF='chrome.css' TYPE='text/css'>");
if(browser.opera) document.write("<link REL='stylesheet' HREF='opera.css' TYPE='text/css'>");
if(browser.firefox) document.write("<link REL='stylesheet' HREF='firefox.css' TYPE='text/css'>");
</script>

是否可以根据访问网站的浏览器自动加载单独的css样式表？

3 个答案: