cssHack

css hack:
方法一:
*
IE都能识别,标准浏览器不能识别;
!important
firefox和IE7能识别,IE6不能识别;
_

只有IE6能识别;

方法二:
例子:
#sample {background:red;} 所有浏览器

* html #sample {backgroud:green;} 针对IE6

* +html #sample{backgroud:blue} 针对IE7

方法三:
第一种或是第二种方案,写出来的CSS文件代码长的很,特别是第二种,这样载入CSS时,会很缓慢,对网站设计没有好处。如果你做的是比较大的网站,还是建议你用下面这种方法,就是通过javascript判断浏览器的类型,然后针对不同的浏览器链接不同的CSS文件。

我们针对不同的浏览器开发出不同的CSS文件,一个针对IE,一个针对Firefox,一个针对其它所有类型的浏览。这样,我们在设计时,就不用去考虑太多,只要我这个CSS能在FF中正常显示,我就不管IE下执行下怎么样了,同样IE中正常的CSS,也不去管它在FF中会是显示如何的乱。

首先,我们在HTML代码里要放入<link> </link>标签,标签里先写入默认要用到的CSS文件的位置,建议放IE中用到的CSS文件,比如<link href="../css/ie.css" rel="stylesheet" type="text/css">,这样能避免在对方浏览器没有开启javascript的时候,无法判断浏览器类型的时候,也能以90%以上人使用的IE正常显示。

把下面这段JS放在HEAD中
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
//如果浏览器为IE,调用../css/ie.css
setActiveStyleSheet("ie.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox,调用../css/firefox.css
setActiveStyleSheet("firefox.css");
}else{
//如果浏览器为其他,调用../css/other.css
setActiveStyleSheet("other.css");
}
}

function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="../css/"+title;
//document.getElementsByTagName("link")[0].href="/blog/css/"+title; 这一行中的0是指第一个名为<link>的标签,href=“”里面就是放置 CSS文件的路径,而title就是CSS文件的文件名
}
//-->
</SCRIPT>

window.navigator.userAgent.indexOf后面是浏览器的类型,如果是Opera的话,还可以加一条if来判断,用javascript 的条件判断去写吧,我这里不多说了。

原文地址:https://www.cnblogs.com/huan-lin/p/3204380.html