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

区别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

时间: 2024-10-07 14:14:19

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

如何让不同浏览器调用不同的CSS样式

由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Internet Explorer和Mozilla Firefox为例,前者对标准的支持明显不如后者,网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛 苦的事情,顾此失彼的情况时有发生.但放弃任何一方的用户都是不明智的,以北极冰仔部落格来说,使用IE的访问者占所有访问者的49.57%,使用 Firefox

多浏览器CSS样式解决方法

一.CSS HACK 1.在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如: #box { color:red !important; color:blue; } (注意这里IE6是无法识别 !important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px) 2.为特定浏览器设置特定的样式 height:20px; /*For all 包括火狐 */ *heigh

[译] 如何调试CSS的跨浏览器样式bug

http://www.cnblogs.com/newyorker/archive/2013/01/22/2870682.html 原文 http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/ 作者为YAHOO前端工程师. 首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些“好的”

CSS样式总结

CSS: Cascading Style Sheet,层叠样式表 Css由三部分组成:选择符.样式属性.值: 基本语法:选择符 {样式属性:值:样式属性:值.....} 一,选择器 常用的选择器有:标签选择器.class选择器(类选择器).id选择器.后代选择器. 组合选择器和并列选择器等等. 1.多元素的组合选择器: 1.并列选择器(E,F,G,...) 这类选择器之间用逗号作分割,能匹配选择器列出的所有标签元素. 2.后代选择器(E F; E>F) E F,标签之间用空格隔开,表示匹配E标签

前端之css样式(选择器)。。。

前端之css样式(选择器)... 一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style

关于bootstrap的css样式如何修改的问题(这是一个小问题)

使用bootstrap可以简化我们开发的流程和代码,但是虽然bootstrap的代码很方便,也面临着css的样式很单调的情况. 我们可以通过覆盖css样式解决. 但是笔者在写的时候发现自己覆盖的代码无法改变bootstrap本来的代码. 这是一个小问题,却困扰了我一下午,网上也没有相关的解答. 其实这个问题很简单,因为html渲染的时候是自上而下的,后面的样式会覆盖前面的样式. 所以如果你的css样式不能覆盖bootstrap的样式,检查一下是不是自己的样式的引入放在了bootstrap的引入前

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

浅谈CSS hack(浏览器兼容)

今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu.com/data/browser).令我感到欣慰的是chrome排第一,chrome一直以来对W3C标准都支持得比较友好,但是图中也反映了使用IE系列的人数也不少,所以我们日常做前端开发的时候还要考虑他们的感受. 以下是正文: 我的前任公司做前端的时候,要求兼容IE8及以上,谷歌,火狐三座大山.因为

css针对各个浏览器的前缀是什么

css针对各个浏览器的前缀是什么:现在写css3代码的时候,为了实现兼容性,需要在前面加前缀以便兼容对应的浏览器.下面就列举一下前缀的写法: -webkit//Webkit内核,例如谷歌和Safari浏览器 -moz//Gecko内核,例如火狐浏览器 -o//Presto内核,例如Opera浏览器 -ms//Trident内核,例如IE浏览器 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18227 更多内容可以参阅:http