码迷,mamicode.com
首页 > Web开发 > 详细

在不同的浏览器使用不同的css样式,解决浏览器兼容问题

时间:2015-12-07 18:29:27      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

    区别IE6与FF:
       background:orange;
       *background:blue;


    区别IE6与IE7:
       background:green !important;
       background:blue;


    区别IE7与FF:
       background:orange;
       *background:green;
       
方法一:在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如:

padding: 20px !important;  /*For Firefox*/
padding: 10px;              /*For IE*/
(注意这里IE6是无法识别 !important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)

这个方法适用于修改少量代码。

例一:

CSS
#box {
     color:red !important;
     color:blue;
 }

HTML
<div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>

这个例子在IE6环境下,这行字是蓝色,在IE7及firefox下,为红色。
这是因为IE6不认important(即不认 !importmant 但是还是认!important前面的color:red),并且color:blue放
在color:red的后面(后面的css定义覆盖了前面的color:red),所以在IE6下字为蓝色;而在IE7及firefox下
important级别优先,所以color:red !important;和color:blue;的前后顺序没有关系,在IE7及firefox下red跟
blue谁先谁后都没有关系。

方法二:条件注释 (只对IE浏览器有效)先为不同浏览器书写各自的CSS样式,再在head中加入以下的代码以适应不同的IE浏览器版本调用:

<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->

<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->

<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->

<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->

<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->

<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->

<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->

<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->

<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->

<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->

<!–[if !IE 6.0]>此内容除了IE6.0版本之外都可见<![endif]–>

另外:IE还支持一个非标准的标签:comment
<p>This is <comment>not</comment> Internet Explorer.</p>
This is Internet Explorer.

IE会自动把此标签中的内容当作注释处理掉。




方法三:javascript. 判断不同的浏览器类型以调用不用的css

//后面为注释

<SCRIPT. LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
...{
//如果浏览器为IE
setActiveStyleSheet("ie.css");
}else...{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
...{
//如果浏览器为Firefox
setActiveStyleSheet("ff.css");
}else...{
//如果浏览器为其他
setActiveStyleSheet("an.css");
}
}

function setActiveStyleSheet(title)...{
document.getElementsByTagName("link")[0].href="/blog/css/"+title;
}
//-->
</SCRIPT>

javascrip判断的第二种方法

<script. language=javascript>
<!--
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4))
{
document.write(‘<link rel=stylesheet type="text/css" href="ie.css">‘)
}
else {document.write(‘<link rel=stylesheet type="text/css" href="ns.css">‘)}
//-->
</script>

方法四:在css里为特定浏览器设置

height:20px; /*For all 包括火狐 */
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
*+height:20px /* IE7 */

在css里面就是那么几句会让不同的浏览器显示的不一样.我们只要把不兼容的那句设定给特定的浏览器,也可以实现完美兼容了

"/9" 例:"margin:0px auto/9;".这里的"/9"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
*+ 针对IE7

在不同的浏览器使用不同的css样式,解决浏览器兼容问题

标签:

原文地址:http://www.cnblogs.com/liaojie970/p/5026405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!