admin 管理员组

文章数量: 887021

让CSS区别不同浏览器
区别不同浏览器，CSS hack写法：

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

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

区别IE7与FF：
background:orange; *background:green;
如何让不同浏览器调用不同的CSS样式
×由于对W3C标准支持程度的不同，往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭。以目前市场占有率最高的两个浏览器Microsoft Internet Explorer和Mozilla Firefox为例，前者对标准的支持明显不如后者，网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛苦的事情，顾此失彼的情况时有发生。但放弃任何一方的用户都是不明智的，以北极冰仔部落格来说，使用IE的访问者占所有访问者的49.57%，使用Firefox的访问者占46.78%，放弃一边就等于放弃掉了一半的访问者。
所以，使用简单的方法以保证网页显示的一致性最重要。
第一个方法。在同一个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

在不同的浏览器下，这行字的色应该不同！

这个例子应该是大家经常见到的important的用法了，在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浏览器版本调用：










注意：
gt: greater than （高于）
lte: less than or equal to （低于或等于）
另外：IE还支持一个非标准的标签：comment

This is not Internet Explorer.

This is Internet Explorer.
IE会自动把此标签中的内容当作注释处理掉。
说了这么多方法，其实也是一种无奈或是妥协
解决不同浏览器css问题
上一篇 / 下一篇 2008-05-20 00:29:35
查看( 43 ) / 评论( 0 ) / 评分( 0 / 0 )
在不同的浏览器里用不同的css
1 :javascript. 判断不同的浏览器类型以调用不用的css
//后面为注释

someNode

{
position: fixed;
#position: fixed;
_position: fixed;
}
第一排给Firefox以及其他浏览器看
第二排给IE7（可能以后的IE8、IE9也是如此，谁知道呢）看
第三排给IE6以及更老的版本看
最好的应用就是可以让IE6也“支持”position:fixed，而且，配合这个原理，可以做到不引入JavaScript代码（仅用IE6的expression），我这里有一个现成的页面，CSS如下写：

ff-r

{
position: fixed;
_position: absolute;
right: 15px;
top: 15px;
_top: expression(eval(documentpatMode &&
documentpatMode==’CSS1Compat’) ?
documentElement.scrollTop+15 :
document.body.scrollTop +
(document.body.clientHeight
-this.clientHeight));
}
当前位置 : 主页 > 网页制作 > CSS教程 > 针对IE8正式版的CSS hack来源：互联网 作者：佚名 时间：07-01 12:23:36 【大 中 小】 点评：IE8正式版出来有一段日志了，但是针对ie8正式版的CSS hack却很少，其实这是值得庆幸的，因为ie8修复了很多IE6和IE7的一些BUG，更加接近W3C标准。 针对IE8正式版的CSS hack目前可以找到的分为2种： 第一种：”9″： 基本的写法: test { color/*/: blue9 }IE8正式版出来有一段日志了，但是针对ie8正式版的CSS hack却很少，其实这是值得庆幸的，因为ie8修复了很多IE6和IE7的一些BUG，更加接近W3C标准。
针对IE8正式版的CSS hack目前可以找到的分为2种：
第一种：”/9″：
基本的写法:
test { color//*/: blue/9 }
这个IE6、IE7、IE8都能识别；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack：
header {width:300px;} /* 所有浏览器*/
header {width//*/:330px/9;} /* 所有浏览器IE浏览器 */
header {width:310px;} / IE7和IE6能识别,IE8和FF不能识别*/
header {_width:290px;} /* IE6能识别，IE7、IE8和FF不能识别*/
第二种：就是使用IE的条件注释
具体可以查看这里：http://www.css88/archives/705；
其他一些css hack的测试：
color1{ color:#F00; color///:#00F ///}/IE6,IE7,IE8,FF,OP,SA识别/
color2{ color:#F00; color ///:#00F //9/}/IE7,IE8,FF,OP,SA识别/
color3{ color:#F00; color//*/:#00F /9}/IE6,IE7,IE8识别/
color4{ color:#F00; color ///:#00F/9}/*IE7,IE8识别//“color”和“///”之间有个空格*/
其中：OP表示Opera，SA表示Safari；
参考阅读：
http://ladysign-apps/blog/archives/529
http://webdevelop.nitamihai/ie8-css-hack/
内容来自: 脚本之家 www.jb51
IE的条件注释【转载】
Posted on : 26-03-2009 | By : 愚人码头 | In : (x)html+css 2
条件注释是IE特有的一种功能，能对IE系列产品进行单独的XHTML代码处理，注意，主要是针对XHTML,而非CSS。
条件注释功能非常强大，可以进行true和false判断，例如：
程序代码

IamFloat{

float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/

}
3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
5、最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /Style for FF/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过
IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，为解决IE7.0的兼容问题，找来了下面这篇文章：
现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解 释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：

example { color: #333; } /* Moz */

  • html #example { color: #666; } /* IE6 */
    +html #example { color: #999; } / IE7 */
    那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。我真希望那个垃圾的IE6快点退休。
    一、CSS HACK
    以下两种方法几乎能解决现今所有HACK.
    1, !important
    随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
    CSS代码

wrapper {

width: 100px !important; /* IE7+FF */
width: 80px; /* IE6 */

}

2, IE6/IE77对FireFox
+html 与 *html 是IE特有的标签, firefox 暂不支持.而+html 又为 IE7特有标签.
CSS代码

wrapper { width: 120px; } /* FireFox */

html #wrapper { width: 80px; } / ie6 fixed */
+html #wrapper { width: 60px; } / ie7 fixed, 注意顺序 */

注意：
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
XML/HTML代码
1.
二、万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
CSS代码

/* Clear Fix */
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix { display:inline-block; }
/* Hide from IE Mac /*/
.clearfix { display:block; }
/* End hide from IE Mac */
/* end of clearfix */

三、其他兼容技巧(再次啰嗦)
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
贴上CSS代码：
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton { margin-top: 21px; }
/* IE7 */
*+html .submitbutton { margin-top: 21px; }
Posted on 2008-06-26 09:50 Boringlamb 阅读(178) 评论(0) 编辑 收藏 网摘 所属分类: ASP.NET Body:31.25,BeforeCate:0,15.625,Total:531.25
我们在用CSS进行构建网页的时候，IE6跟Firefox之间的差异问题可以用 !important 来解决（这种方法尽量少用），但是IE7似乎还是不认识 !important ，而且它跟IE6之间也存在一些差异。浏览器的不一致性总是让人很头疼！
下面分别给出IE6/IE7/Firefox的hack代码：

example { color: #333; } /* Firefox */

  • html #example { color: #666; } /* IE6 */
    +html #example { color: #999; } / IE7 */
    那么在Firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们之间互不干扰。

IE6,IE7,FireFox兼容CSS的解决方法及CSS差别(2008-05-08 15:29:51)标签：杂谈
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

wrapper

{
width: 100px!important;
width: 80px;
}

2, IE6/IE7对FireFox
+html 与 *html 是IE特有的标签, firefox 暂不支持.而+html 又为 IE7特有标签.

wrapper

{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}

注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：

二、万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
.clearfix {display:block;}


三、其他兼容技巧(再次啰嗦)
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：

1 { color: #333; }

  • html #1 { color: #666; }
    *+html #1 { color: #999; }
    那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
    2 css布局中的居中问题
    主要的样式定义如下：
    body {TEXT-ALIGN: center;}

center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.

box{ width:600px; //for ie6.0- w/idth:500px; //for ff+ie6.0}

box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}

4 浮动ie产生的双倍距离

box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类：
然后CSS这样设计：

container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? “600px”: “auto” );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}

HTML代码


9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

IE6 IE7 FF
* √ √ ×
!important × √ √

另外再补充一个，下划线”_”, IE6支持下划线，IE7和firefox均不支持下划线。 于是大家还可以这样来区分IE6，IE7，firefox
background:orange;*background:green;_background:blue;

本文标签： 浏览器 样式 兼容问题 css

版权声明：本文标题：在不同的浏览器使用不同的css样式,解决浏览器兼容问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729174537h1327104.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。