让IE和Firefox兼容的CSS技巧集合css hack

时间：2016-04-12 10:03:19 阅读：324 评论：0 收藏：0 [点我收藏+]

标签：

　　CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。

　　CSS技巧

　　1.div的垂直居中问题

　　vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

　　2. margin加倍的问题

　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

　　例如：

＜#div id=”imfloat”>

相应的css为

#imfloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

　　3.浮动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;

　　4 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;}

　　5.页面的最小宽度

　　min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个＜div> 放到＜body> 标签下，然后为div指定一个类,然后CSS这样设计：

　　#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}

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

　　6.DIV浮动IE文本产生3象素的bug

　　左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

＜div id="box">

＜div id="left">＜/div>

＜div id="right">＜/div>

＜/div>

　　7.IE捉迷藏的问题

　　当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

　　有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

　　8.float的div闭合;清除浮动;自适应高度;

　　①例如：＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

　　这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在＜#div class=”floatB”> ＜#div class=”NOTfloatC”>之间加上＜#div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}

　　②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

　　例如某一个wrapper如下定义：

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

　　③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

＜div id=”page”>

＜div id=”left”>＜/div>

＜div id=”center”>＜/div>

＜div id=”right”>＜/div>

＜/div>

　　比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成 float,所以我们应该这样解决

＜div id=”page”>

＜div id=”bg” style=”float:left;width:100%”>

＜div id=”left”>＜/div>

＜div id=”center”>＜/div>

＜div id=”right”>＜/div>

＜/div>

　　再嵌入一个float left而宽度是100%的DIV解决之

　　④万能float 闭合(非常重要!)

　　关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

/* 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 */

　　或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

　　8．高度不适应

　　高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。

例：

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

＜div id="box">

＜p>p对象中的内容＜/p>

＜/div>

　　解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

　　10 .IE6下为什么图片下有空隙产生

　　解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top 　 bottom 　middle 　text-bottom 都可以解决.

　　11.如何对齐文本与文本输入框

　　加上 vertical-align:middle;

＜style type="text/css">

＜!--

input {

width:200px;

height:30px;

border:1px solid red;

vertical-align:middle;

}

-->

＜/style>

　　12.web标准中定义id与class有什么区别吗

　　一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

　　二.属性的优先级问题

　　ID 的优先级要高于class,看上面的例子

　　三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

　　13. LI中内容超过长度后以省略号显示的方法

　　此方法适用与IE与OP浏览器

＜style type="text/css">

＜!--

li {

width:200px;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

}

-->

＜/style>

　　14.为什么web标准中IE无法设置滚动条颜色了

　　解决办法是将body换成html

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

＜style type="text/css">

＜!--

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

-->

＜/style>

　　15.为什么无法定义1px左右高度的容器

　　IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden 　 zoom:0.08 　 line-height:1px

　　16.怎么样才能让层显示在FLASH之上呢

　　解决的办法是给FLASH设置透明

＜param name="wmode" value="transparent" />

　　17.怎样使一个层垂直居中于浏览器中

　　这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

＜style type="text/css">

＜!--

div {

position:absolute;

top:50%;

lef:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid red;

}

-->

＜/style>

FF与IE

　　1. Div居中问题

　　div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

　　2.链接(a标签)的边框与背景

　　a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

　　3.超链接访问过后hover样式就不出现的问题

　　被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A

Code:

＜style type="text/css">

＜!--

a:link {}

a:visited {}

a:hover {}

a:active {}

-->

＜/style>

　　4. 游标手指cursor

　　cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

　　5.UL的padding与margin

　　ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

　　6. FORM标签

　　这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

　　7. BOX模型解释不一致问题

　　在FF和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;

#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-}

　　8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)

　　p[id]{}div[id]{}

　　这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

　　9.最狠的手段 - !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 这句放置在另一句之上，上面已经提过

　　10.IE,FF的默认值问题

　　或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和 IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。

　　我们都知道，浏览器在显示网页的时候，都会根据网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现 FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。

　　11.为什么FF下文本无法撑开容器的高度

　　标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

{

height:auto!important;

height:200px;

min-height:200px;

}

　　12.FireFox下如何使连续长字段自动换行

　　众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入

的方法来解决

＜style type="text/css">

＜!--

div {

width:300px;

word-wrap:break-word;

border:1px solid red;

}

-->

＜/style>

＜div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>

＜scrīpt type="text/javascrīpt">

/* ＜![CDATA[ */

function toBreakWord(el, intLen){

var ōbj=document.getElementById(el);

var strContent=obj.innerHTML;

var strTemp="";

while(strContent.length>intLen){

strTemp+=strContent.substr(0,intLen)+"

strContent=strContent.substr(intLen,strContent.length);

}

strTemp+="

"+strContent;

obj.innerHTML=strTemp;

}

if(document.getElementById && !document.all) toBreakWord("ff", 37);

/* ]]> */

＜/scrīpt> 　　

13.为什么IE6下容器的宽度和FF解释不同呢

＜?xml version="1.0" encoding="gb2312"?>

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

＜style type="text/css">

＜!--

div {

cursor:pointer;

width:200px;

height:200px;

border:10px solid red

}

-->

＜/style>

＜div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容＜/div>

　　问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices /asp.net/

ASPNETusStan.mspx?mfr=true

　　IE6,IE7,FF

　　IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网Bpx; /*For IE7 & IE6*/

_height:20px; /*For IE6*/

　　注意顺序。

　　这样也属于CSS HACK，不过没有上面这样简洁。

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

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

　　第二种，是使用IE专用的条件注释

＜!--其他浏览器 -->

＜link rel="stylesheet" type="text/css" href="css.css" />

＜!--[if IE 7]>

＜!-- 适合于IE7 -->

＜link rel="stylesheet" type="text/css" href="ie7.css" />

＜![endif]-->

＜!--[if lte IE 6]>

＜!-- 适合于IE6及一下 -->

＜link rel="stylesheet" type="text/css" href="ie.css" />

＜![endif]-->

　　第三种，css filter的办法，以下为经典从国外网站翻译过来的。.

　　新建一个css样式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

　　新建一个div,并使用前面定义的css的样式：

＜div id="item">some text here＜/div>

　　在body表现这里加入lang属性,中文为zh：

＜body lang="en">

　　现在对div元素再定义一个样式：

*:lang(en) #item{

background:green !important;

}

　　这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：

#item:empty {

background: green !important

}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。

对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较好。

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

发布时间：2009-06-13 09:19:43 作者: 2009王辉

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

所以，使用简单的方法以保证网页显示的一致性最重要。

第一个方法。在同一个CSS样式表中，使用 !important 来定义不同的值以适应Firefox和IE，例如：

PLAIN TEXT

CSS:

padding: 20px !important; padding: 10px; 这个方法适用于修改少量代码。

第二种方法。条件注释。（只对IE浏览器有效）这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式，再在head中加入以下的代码以适应不同的IE浏览器版本调用：

PLAIN TEXT

HTML:

According to the conditional comment this is Internet Explorer

/><![endif]-->

下边是别的网站上的，感觉内容不错就copy下来：

由于浏览器版本的不同，对CSS里某些元素的解释也不一样，才子当然也碰到同样的问题，也收集了一些解决方法，才子之前贴过两个针对浏览器版本不同而选择不同CSS的代码，有兴趣的朋友自己找找吧。

其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，才子也在此简单介绍一下，无非就是一些if判断啦，呵呵，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，下面来介绍一下使用方法吧。

引用:

<!--[if XXX]>

这里是正常的html代码

<![endif]-->

这里XXX是一些特定的东东，在此列表几个出来，详细介绍各自的含义：

<!--[if IE]> / 如果浏览器是IE /

<!--[if IE 5]> / 如果浏览器是IE 5 的版本 /

<!--[if IE 6]> / 如果浏览器是IE 6 的版本 /

<!--[if IE 7]> / 如果浏览器是IE 7 的版本 /

......

上面是几个常用的判断IE浏览器版本的语法，下面再来介绍一下相对比较少用的逻辑判断的参数：

有几个参数：lte，lt，gte，gt及!

各自的详细解释如下：

引用:

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同，^0^

也写几条例句吧：

引用:

<!--[if gt IE 5.5]> / 如果IE版本大于5.5 /

<!--[if lte IE 6]> / 如果IE版本小于等于6 /

<!--[if !IE]> / 如果浏览器不是IE /

......

看到这里相信大家都已经明白了条件注释的用法了，OK，那来举个例子吧：

<!--[if !IE]>

<![endif]-->

<!--[if lt IE 6]>

<![endif]-->

详细使用方法已经介绍完了，不得不提的一点就是：

条件注释是在IE5.0/Win以后才被IE支持的，对于IE5以前的浏览器是无效的，不过，应该没什么人还在使用IE4的版本了吧。^0^

浏览器的条件注释理论，用下面一段例子来解释这个问题

(X)HTML

下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果

引用:

<!--[if IE]>

<h1>您正在使用IE浏览器</h1>

<![endif]-->

<!--[if IE 5]>

<![endif]-->

<!--[if IE 5.0]>

<![endif]-->

<!--[if IE 5.5]>

<![endif]-->

<!--[if IE 6]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

下面的代码是在非IE浏览器下运行的条件注释

引用:

<h1>您使用不是 Internet Explorer</h1>

最终在非IE和特殊的IE浏览器下起作用

(或者使用 lte lt 或者 gt gte来判断，如：

引用:

<!--[if lte IE 6]>

在IE 6下显示的信息

<![endif]-->

<h1>您正在使用Internet Explorer version 6<br />

或者一个非IE 浏览器</h1>

From：cssplay.co.uk/menu/conditional.html" target="_blank">http://www.cssplay.co.uk/menu/conditional.html

上面提到了条件注释，就是判断浏览器类型，然后定义什么浏览器下显示什么内容。

这个dropmenu（下拉菜单）模型来自cssplay，使经过作者多次的研究和反复的测试才做出来的。我想那这个模型来实践一下条件注释的原理。

先看一个最简单的模型

下面是xhtm

引用:

<ul>

<li><a class="drop" href="../menu/index.html">DEMOS

</a>

<ul>

<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>

<li><a href="../menu/e.html" title="Wrapping text around images">wrapping text around images</a></li>

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders</li>

<li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>

<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>

<li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>

<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>

<li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>

</ul>

</td></tr></table>

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

</ul>

</div>

CSS

<!--[if lte IE 6]>

<![endif]-->

采用双样式，给ie和非ie分别定义样式，如果IE时候，在final_drop.css基础上补充一个final_drop_ie.css

先看看非ie下的css是怎样定义的

.menu ul li ul {

display: none;

}

.menu ul li:hover a {

color:#fff;

background:#bd8d5e;

}

.menu ul li:hover ul {

display:block;

position:absolute;

top:3em;

margin-top:1px;

left:0;

width:150px;

}

在非IE下，看到鼠标滑过时候li包含的ul显示了，因为这些浏览器支持li:hover用法

IE下的css

.menu ul li a:hover {

color:#fff;

background:#bd8d5e;

}

.menu ul li a:hover ul {

display:block;

position:absolute;

top:3em;

left:0;

background:#fff;

margin-top:0;

margin-top:1px;

}

继承上面的final_drop.css样式，无鼠标时间时候li包含的ul不显示

因为

<!--[if lte IE 6]>

</a>

<![endif]-->

IE与Firefox的CSS兼容大全-Web标准教程

来源：作者：时间：2008-01-31 收藏推荐评论打印点击： 17 CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。

ECoo8.com__艺酷吧

艺酷吧-ECoo8__com

常见兼容问题：

艺酷吧--ecoo8_COm

WWW.ecoo8_COM

1、DOCTYPE 影响 CSS 处理

ecoo8@COM

2、FF：div 设置 margin-left， margin-right 为 auto 时已经居中，IE 不行

WWW.ecoo8_COM

3、FF: body 设置 text-align 时， div 需要设置 margin: auto(主要是 margin-left，margin-right) 方可居中艺酷吧--ecoo8_COm

4、FF: 设置 padding 后， div 会增加 height 和 width，但 IE 不会，故需要用 !important 多设一个 height 和 width

WWW.ecoo8_COM

艺酷吧--ecoo8_COm

5、FF: 支持 !important， IE 则忽略，可用 !important 为 FF 非凡设置样式

EcOo8.com-艺酷吧

6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

ecoo8@COM

7、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

WWW.ecoo8_COM

8、FF: 链接加边框和背景色，需设置 display: block，同时设置 float: left 保证不换行。参照 menubar，给 a 和 menubar 设置高度是为了避免底边显示错位，若不设 height，可以在 menubar 中插入一个空格。

www.ecoo8__COM

ecoo8_COM

9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

ecoo8@COM

div{margin:30px!important;margin:28px;}

艺酷吧-Ecoo8.com

注重这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

艺酷吧-ecoo8.-COM

ECoo8.com__艺酷吧

div{maring:30px;margin:28px}

WWW.ecoo8_COM

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; wwW.ecoo8_COM

10、IE5 和IE6的BOX解释不一致艺酷吧-Ecoo8.com

IE5下

ecoo8_coM

ECoo8.com__艺酷吧

div{width:300px;margin:0 10px 0 10px;}

WWW.ecoo8_COM

ECoo8.com__艺酷吧

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px 10px(右填充) 10px(左填充)=320px来计算的。这时我们可以做如下修改 wwW.ecoo8_COM

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

ecoo8@COM

关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持。

ECoo8.com__艺酷吧

11、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值所以先定义

WWW.ecoo8_COM

艺酷吧-Ecoo8.com

ul{margin:0;padding:0;}

www.ecoo8_COM

就能解决大部分问题 WWW.ecoo8_COM

注重事项：

ecoo8____COM

EcOo8.com-艺酷吧

1、float的div一定要闭合。

ecoo8____COM

例如：(其中floatA、floatB的属性已经设置为float:left;)

wwW.ecoo8_COM

<#div id="floatA" ></#div> 艺酷吧-Ecoo8.com

<#div id="floatB" ></#div> 艺酷吧--ecoo8_COm

<#div id="NOTfloatC" ></#div>

EcOo8.com-艺酷吧

艺酷吧-ECoo8__com

这里的NOTfloatC并不希望继续平移，而是希望往下排。

艺酷吧--ecoo8_COm

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。

ecoo8_COM

在

WWW.ecoo8_COM

EcOo8.com-艺酷吧

<#div class="floatB"></#div>

ecoo8____COM

<#div class="NOTfloatC"></#div>

ecoo8_COM

之间加上

wWw.ecoo8_COM

<#div class="clear"></#div>

ecoo8---Com-艺酷吧

ecoo8_coM

这个div一定要注重声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。

wwW.ecoo8_COM

并且将clear这种样式定义为为如下即可：

wwW.ecoo8_COM

.clear{

艺酷吧--ecoo8_COm

clear:both;} 艺酷吧-ecoo8.-COM

此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

艺酷吧-Ecoo8.com

当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 WWW.ecoo8_COM

例如某一个wrapper如下定义：

艺酷吧-ecoo8.-COM

以下为引用的内容：

.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

艺酷吧-ecoo8.-COM

www.ecoo8_COM

2、margin加倍的问题。 ECoo8.com__艺酷吧

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

ecoo8_coM

解决方案

EcOo8.com-艺酷吧

是在这个div里面加上display:inline; www.ecoo8__COM

例如：

艺酷吧-ecoo8.-COM

<#div id="imfloat"></#div>

艺酷吧-ECoo8__com

ecoo8---Com-艺酷吧

相应的css为

ecoo8_coM

艺酷吧-ECoo8__com

以下为引用的内容：

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

ecoo8---Com-艺酷吧

3、关于容器的包涵关系

www.ecoo8_COM

ecoo8____COM

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很轻易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。 EcOo8.com-艺酷吧

4、关于高度的问题

艺酷吧--ecoo8_COm

艺酷吧-Ecoo8.com

假如是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而假如是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

ecoo8@COM

艺酷吧--ecoo8_COm

5、最狠的手段 - !important; ECoo8.com__艺酷吧

假如实在没有办法解决一些细节问题，可以用这个方法.FF对于"!important"会自动优先解析，然而IE则会忽略。如下 www.ecoo8_COM

以下为引用的内容：

.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 */}

EcOo8.com-艺酷吧

WWW.ecoo8_COM

值得注重的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过 undefined undefined

让CSS兼容IE和Firefox的技巧集合

作者：佚名来源：绿色软件下载站发布时间：2008-12-20 18:00:13 减小字体增大字体

（您可以通过本站搜索直接下载该软件)

　　CSS技巧

　　1.div的垂直居中问题

　　vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

　　2. margin加倍的问题

　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

　　例如：

＜#div id=”imfloat”>

相应的css为

#imfloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

　　3.浮动ie产生的双倍距离

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

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

　　4 IE与宽度和高度的问题

　　比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

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

　　5.页面的最小宽度

　　#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}

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

　　6.DIV浮动IE文本产生3象素的bug

　　左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

＜div id="box">

＜div id="left">＜/div>

＜div id="right">＜/div>

＜/div>

　　7.IE捉迷藏的问题

　　当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

　　8.float的div闭合;清除浮动;自适应高度;

　　例如某一个wrapper如下定义：

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

　　③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

＜div id=”page”>

＜div id=”left”>＜/div>

＜div id=”center”>＜/div>

＜div id=”right”>＜/div>

＜/div>

＜div id=”page”>

＜div id=”bg” style=”float:left;width:100%”>

＜div id=”left”>＜/div>

＜div id=”center”>＜/div>

＜div id=”right”>＜/div>

＜/div>

　　再嵌入一个float left而宽度是100%的DIV解决之

　　④万能float 闭合(非常重要!)

　　关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

/* 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 */

　　或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

　　8．高度不适应

　　高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。

例：

#box {backgr ound-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

＜div id="box">

＜p>p对象中的内容＜/p>

＜/div>

　　解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

　　10 .IE6下为什么图片下有空隙产生

　　11.如何对齐文本与文本输入框

　　加上 vertical-align:middle;

＜style type="text/css">

＜!--

input {

width:200px;

height:30px;

border:1px solid red;

vertical-align:middle;

}

-->

＜/style>

　　12.web标准中定义id与class有什么区别吗

　　一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

　　二.属性的优先级问题

　　ID 的优先级要高于class,看上面的例子

　　13. LI中内容超过长度后以省略号显示的方法

　　此方法适用与IE与OP浏览器

＜style type="text/css">

＜!--

li {

width:200px;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

}

-->

＜/style>

　　14.为什么web标准中IE无法设置滚动条颜色了

　　解决办法是将body换成html

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

＜style type="text/css">

＜!--

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

-->

＜/style>

　　15.为什么无法定义1px左右高度的容器

　　IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden 　 zoom:0.08 　 line-height:1px

　　16.怎么样才能让层显示在FLASH之上呢

　　解决的办法是给FLASH设置透明

＜param name="wmode" value="transparent" />

　　17.怎样使一个层垂直居中于浏览器中

　　这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

＜style type="text/css">

＜!--

div {

position:absolute;

top:50%;

lef:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid red;

}

-->

＜/style> 　　FF与IE

　　1. Div居中问题

　　2.链接(a标签)的边框与背景

　　3.超链接访问过后hover样式就不出现的问题

　　被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A

Code:

＜style type="text/css">

＜!--

a:link {}

a:visited {}

a:hover {}

a:active {}

-->

＜/style>

　　4. 游标手指cursor

　　cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

　　5.UL的padding与margin

　　ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

　　6. FORM标签

　　7. BOX模型解释不一致问题

#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-}

　　8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)

　　p[id]{}div[id]{}

　　9.最狠的手段 - !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 这句放置在另一句之上，上面已经提过　　10.IE,FF的默认值问题

　　11.为什么FF下文本无法撑开容器的高度

{

height:auto!important;

height:200px;

min-height:200px;

}

　　12.FireFox下如何使连续长字段自动换行

　　众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入

的方法来解决

＜style type="text/css">

＜!--

div {

width:300px;

word-wrap:break-word;

border:1px solid red;

}

-->

＜/style>

＜div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>

＜scrīpt type="text/javascrīpt">

/* ＜![CDATA[ */

function toBreakWord(el, intLen){

var ōbj=document.getElementById(el);

var strContent=obj.innerHTML;

var strTemp="";

while(strContent.length>intLen){

strTemp+=strContent.substr(0,intLen)+"

strContent=strContent.substr(intLen,strContent.length);

}

strTemp+="

"+strContent;

obj.innerHTML=strTemp;

}

if(document.getElementById && !document.all) toBreakWord("ff", 37);

/* ]]> */

＜/scrīpt> 　　13.为什么IE6下容器的宽度和FF解释不同呢

＜?xml version="1.0" encoding="gb2312"?>

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

＜style type="text/css">

＜!--

div {

cursor:pointer;

width:200px;

height:200px;

border:10px solid red

}

-->

＜/style>

＜div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容＜/div>

ASPNETusStan.mspx?mfr=true

　　IE6,IE7,FF

　　IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网Bpx; /*For IE7 & IE6*/

_height:20px; /*For IE6*/

　　注意顺序。

　　这样也属于CSS HACK，不过没有上面这样简洁。

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

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

　　第二种，是使用IE专用的条件注释

＜!--其他浏览器 -->

＜link rel="stylesheet" type="text/css" href="css.css" />

＜!--[if IE 7]>

＜!-- 适合于IE7 -->

＜link rel="stylesheet" type="text/css" href="ie7.css" />

＜![endif]-->

＜!--[if lte IE 6]>

＜!-- 适合于IE6及一下 -->

＜link rel="stylesheet" type="text/css" href="ie.css" />

＜![endif]-->

　　第三种，css filter的办法，以下为经典从国外网站翻译过来的。.

　　新建一个css样式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

　　新建一个div,并使用前面定义的css的样式：

＜div id="item">some text here＜/div>

　　在body表现这里加入lang属性,中文为zh：

＜body lang="en">

　　现在对div元素再定义一个样式：

*:lang(en) #item{

background:green !important;

}

#item:empty {

background: green !important

}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。

　　对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较好。

IE与Firefox的CSS兼容大全

2008年07月19日星期六 08:55 A.M.CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。

　　常见兼容问题：

　　1.DOCTYPE 影响 CSS 处理

　　2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

　　3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

　　4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

　　5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

　　6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了缺点是要控制内容不要换行

　　7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

　　8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

　　9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

　　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

　　10.IE5 和IE6的BOX解释不一致

　　IE5下

div{width:300px;margin:0 10px 0 10px;}

　　div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

　　关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

　　11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

　　就能解决大部分问题

　　注意事项：

　　1、float的div一定要闭合。

　　例如：(其中floatA、floatB的属性已经设置为float:left;)

<#div id="floatA" ></#div>

<#div id="floatB" ></#div>

<#div id="NOTfloatC" ></#div>

　　这里的NOTfloatC并不希望继续平移，而是希望往下排。

　　这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。

　　在

<#div class="floatB"></#div>

<#div class="NOTfloatC"></#div>

　　之间加上

<#div class="clear"></#div>

　　这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。

　　并且将clear这种样式定义为为如下即可：

.clear{

clear:both;}

　　此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

　　当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

　　例如某一个wrapper如下定义：

.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

　　2、margin加倍的问题。

　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

　　解决方案是在这个div里面加上display:inline;

例如：

<#div id="imfloat"></#div>

　　相应的css为

#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 这句放置在另一句之上，上面已经提过

Firefox、IE对CSS的兼容性整理

1、firefox和IE对某些css样式的认定有不少区别，包括：

ul和ol的默认padding值是不一样的，在Firefox中，padding-left默认值为40px左右，而IE中为0，一般设置ul{margin:0;padding:0;}就能解决大部分问题。

并列排列的多个元素（图片或者链接）的代码中的空格和回车会造成元素之间的间隙，而在firefox中和IE中显示是不一样的，IE显示空格（约8px）、firefox显示空格（约4px）。

对不规范代码的兼容情况不同，IE中漏掉的关闭符号对显示不造成影响，而firefox中就会形成错乱的布局。

firefox对于宽高尺寸的严格解析会造成与设置不匹配（超出）的图片或表格将原设置div撑大。

未定义id的div，在IE中会与div属性中的其他设置有关，而在firefox中的位置会于div在文件中位置有关，紧随前一个div出现。

设置为float的div在ie下设置的margin会加倍的，特别是margin-left，这是ie6的一个bug。解决的方法是在这个div里面加上display:inline;

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。IE里设置text-align:center，就居中了，但在FF中不行。所以一般两个都要设置。

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个height 和 width

FF对于"!important"会自动优先解析,然而IE则会忽略.如下

.tabd{

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 */

}

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。

2、针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，

但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针

对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

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

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

3、firefox下多层嵌套时内层设置了浮动外层设置背景时背景不显示

这主要是内层设置浮动后外层高度在firefox下变为0，所以应该在外层与内层间再嵌一层，设置浮动和宽

度，然后给这个层设置背景（听说还有其他方法，感觉还是这方法好使）

4、属性选择器(这个不能算是兼容,是隐藏css的一个bug

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

5、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

</div>

当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。解决方案

</div>

在层的最下方产生一个高度为1的空格，可解除这个问题

纯CSS制作支持IE6、IE7、Firefox的下拉菜单

2009年06月20日星期六 11:03<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>纯CSS的下拉菜单支持IE6 IE7 Firefox</title>

*{margin:0;padding:0;}

.menu{font-size:12px;position:relative;z-index:100;}

.menu ul{list-style:none;}

.menu li {float:left;position:relative;}

.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}

.menu table {position:absolute; top:0; left:0;}

.menu ul li:hover ul,

.menu ul a:hover ul{visibility:visible;}

.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}

.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}

.menu ul ul{}

.menu ul ul li {clear:both;text-align:left;font-size:12px;}

.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}

.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}

</style>

</head>

<body>

<ul>

<li><a href="http://www.lanrentuku.com/">XHTML/CSS

</a>

<ul>

<li><a href="http://www.lanrentuku.com/">布局教程专题</a></li>

<li><a href="http://www.lanrentuku.com/">CSS菜单</a></li>

<li><a href="http://www.lanrentuku.com/">浏览器兼容</a></li>

<li><a href="http://www.lanrentuku.com/">滚动条相关</a></li>

<li><a href="http://www.lanrentuku.com/">圆角矩形专题</a></li>

<li><a href="http://www.lanrentuku.com/">CSS特效欣赏专题</a></li>

</ul>

</li>

<li><a href="http://www.lanrentuku.com/">07艺术

</a>

<ul>

</ul>

</li>

<li><a href="http://www.lanrentuku.com/">Javascript

</a>

<ul>

</ul>

</li>

<li><a href="http://www.lanrentuku.com/">正则表达式

</a>

<ul>

<li><a href="http://www.lanrentuku.com/">正则表达式简介</a></li>

<li><a href="http://www.lanrentuku.com/">正则表达式之道</a></li>

</ul>

</li>

<li><a href="http://www.lanrentuku.com/">建站技术

</a>

<ul>

<li><a href="http://www.lanrentuku.com/">Flash</a></li>

<li><a href="http://www.lanrentuku.com/">Dreamweaver</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

IE Bug,div+css之常见问题,IE与Firefox的CSS兼容大全

...整理2009年04月09日星期四 14:53图文混排容易导致扩展框问题.

<div><img src="images/index_1.jpg" />扩展框问题</div>

这样排版容易导致扩展框问题.

尽量定义宽高给定值

* 浮动下降问题

加上｛float：left；｝即可```

IE6的双倍边距BUG

解决办法是加上display:inline

IE6下为什么图片下方有空隙产生

解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.

IE6下这两个层中间怎么有间隙

这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left

如何对齐文本与文本输入筐

遇到此种问题，设置文本框的 vertical-align:middle 就可以了

为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

{

height:auto!important;

height:200px;

min-height:200px;

}

怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明<param value="transparent" />或者<param value="opaque" />

怎样使一个层垂直居中于浏览器中

使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二.

方法二:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，

只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

{

width:300px;

margin-left:auto;

margin-right:auto;

}

针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，

但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针

对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

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

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

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

属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

最狠的手段 - !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.

关于容器的包涵关系

1.写两句代码来控制一个属性，区别Firefox与IE：

background:orange; *background:green;

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。

2.写两句代码来控制一个属性，区别IE7与IE6：

background:green !important;background:blue;

// 这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份.

3.写三句代码来控制一个属性，区别Firefox，IE7，IE6：

background:orange;*background:green !important;*background:blue;

// 这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

2009年06月03日星期三 20:11

基本HTML代码

www.027good.cn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Div Float Sample</title>

div { margin:3px; }

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }

</style>

</head>

<body>

</div>

</body>

</html>

以上代码显示的结果如下，很正常，结果相同。

下面会在这个基础上进行修改，修改的内容都在style中，其他代码就不再重复写了。

请注意，这里的Style中用到了min-height，这个和height是不同的，min-height指定了对象的一个最小高度，当对象的子内容高度超过这个最小高度是，这个对象会自动撑大。这是一个非常牛的style，可惜的是，在这个style和float这个同样牛的style一起使用的时候，就会出现各种问题。

内部一个Div修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }

显示结果如下。

这个结果中，Firefox有点离谱了，两个框叠在一起也就罢了，为什么那个红框会变大捏？而且变的大小也很诡异，不知道是按照什么公式计算出来的。IE在这里的显示应当是附和标准的。

内部两个Div都修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }

显示结果如下。

在这种情况下，Firefox的结果尚能解释，可能是float把外层的Div也作为内层float影响的范围，这样内层的就不会将外层的Div撑大了。IE在这里出现了Margin失效的情况，可以解释为内层第二个float造成了影响。

干脆把外层的Div也修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }

显示结果如下，

这种情况下，Firefox正常了，而IE延续了前面的不正常情况。

外层是float:left，内层最后一个不再float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }

显示结果如下，

这和前面第一种加float:left的情况相同。

结论

再重申一次，本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度，是不会出现以上这些问题的。不过，不用min-height就失去了div自动撑大这一个很有必要的特性。

在min-height和float:left的情况下，没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。

进一步试验可以发现，margin遭到的影响在padding上比较好，所以最好是padding和margin都不用，或者只用padding。

两者相同的代码如下，

div { padding:3px; }

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }

显示结果如下，

呵呵，总算是一样了，虽然是凑合着一样了。幸好一样了，否则只好用table了。

当然所有这些情况也许是有合理解释的，说不定增加某一个style的设置，这些问题都迎刃而解了，不过目前我还没有找到这个设置。

关于Doctype

以上代码在下面这些Doctype下试验过，结果相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

IE6、IE7、Firefox之间的兼容写法

2009年05月27日星期三 18:32IE6、IE7、Firefox之间的兼容写法

因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

1、 IE6、IE7、Firefox之间的兼容写法：

写法一：

IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

根据上述表达，同一类/ID下的CSS hack可写为：

.searchInput {

/*三者皆可*/

* /*仅IE7*/

* /*仅IE6及IE6以下*/

}

一般三者的书写顺序为：FF、IE7、IE6.

写法二：

IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：

.searchInput {

/*通用*/

_/*仅IE6可识别*/

}

写法三：

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.searchInput {}

*html .searchInput {background-color:#666;}/*仅IE6*/

*+html .searchInput {}/*仅IE7*/

屏蔽IE浏览器：

select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px !important;} /*FF的专用*/

select:empty {font:12px !important;} /*safari可见*/

IE6可识别：

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

IE的if条件hack写法：

所有的IE可识别： <!–[if IE]> Only IE <![end if]–>

只有IE5.0可以识别:

<!–[if IE 5.0]> Only IE 5.0 <![end if]–>

IE5.0包换IE5.5都可以识别:

<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>

仅IE6可识别:

<!–[if lt IE 6]> Only IE 6- <![end if]–>

IE6以及IE6以下的IE5.x都可识别:

<!–[if gte IE 6]> Only IE 6/+ <![end if]–>

仅IE7可识别:

<!–[if lte IE 7]> Only IE 7/- <![end if]–>

简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera

方法一：跨浏览器的网页设计一直是让人很头疼的问题，这不只是因为浏览器的版本众多，还有一个重要的原因是相同浏览器的不同时期的版本也会有差异，甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多，具体可以查看：

本文据说的主要是通过“.”，“>”，“*”，“_”来区分。以下是本人对这四种符号的测试结果：

———————IE6—— IE7——IE8——FF2——FF3— Opera9.5

>property—— Y—— Y—— Y—— N—— N—— N

.property—— Y—— Y—— Y—— N—— N—— N

*property—— Y—— Y—— Y—— N—— N—— N

_property—— Y—— N—— N—— N—— N—— N

我们可以看到>property、.property、*property在各浏览器中的表现是一致的，只有_property在IE6和IE7、IE8中有所区别。另外还要注意的，IE6是不支持!important的，而其他几款浏览器都识别。

举例：

要对想同的文字在不同浏览器中显示不同的颜色可以使用： color:brown !important; /*用于Opera、Firefox2、Firefox3等现代浏览器*/

>color:green !important; /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/

color:red; /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/

color:brown !important; /*用于Opera、Firefox2、Firefox3等现代浏览器*/ >color:green !important; /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/ color:red; /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/

因此这就实现了跨浏览器的表现问题。_property和*property也是一样的。对于_property来说，只有IE6才能识别，因此可以用于单独对IE6的设置中。

不过这里要注意书写的顺序：现在浏览器的写法要写在最前面，IE6的写法要写在最后面用于覆盖，其他浏览器写在中间。

方法二：其实主要是浏览器：IE6/IE7/firefox下，各个对CSS代码的解释有区别，下边转载一篇HACK的文章，相当实用。

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

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

区别IE7与FF： background:orange; *background:green;

区别FF/IE7/IE6： background:orange;*background:green !important;*background:blue;

注：IE都能识别*标准浏览器(如FF)不能识别*

IE6能识别*，但不能识别 !important

IE7能识别*，也能识别!important

FF不能识别*，但能识别!important

另外再补充一个，下划线"_",

IE6支持下划线，IE7和firefox均不支持下划线。(推荐.我这只有这个有效！)

于是大家还可以这样来区分IE6、IE7、firefox

: background:orange;*background:green;_background:blue;

* html p {color:#f00;} 支持 IE6 不支持FF IE7 IE8b

*+html p {color:#f00;} 支持 IE7 IE8b 不支持FF IE6

p {*color:#f00;} 支持 IE7 IE6 不支持FF IE8

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在后面。

Css兼容性 && CSS hack:区分IE6，IE7，IE8，firefox

2009年06月19日星期五 10:35 A.M.以前做网页的时候，只考虑 IE6 和 FF 的兼容性，换个公司了，要求也高了，FF和IE 6 7 8 要全兼容了，

碰到要单独Hack IE8的。当然，用注释非常方便，只要添加相应的注释就可以解决。但问题是，为了一句CSS写多一个文件，或者在header上添加注释，那显然不是懒人的习惯做法。结论如下：

当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示：

演示的CSS代码如下：

p.ie{

height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;

color:blue; // 所有浏览器

color:brown\9; // 所有IE浏览器

+color:red; // IE7

_color:green; // IE6

}

注意下面介绍的这些hack写法仅适用于XHTML1.0。如果没有在HTML最前加上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

那么效果将不一样！此外，这里所说的IE8，不是指IE8的兼容模式，因为IE8的兼容模式其实就是IE7。

区别IE6、7与FF/IE8：

background:blue;*background:orange;

引用显示效果：

IE 6/7：orange

FF/IE8:blue

原理：FF/IE8不支持*开头，而IE6/7都支持。

区别IE6与IE7/IE8/FF：

background:green;_background:blue;

引用显示效果：

IE7/8/FF：green

IE6:blue

原理：IE6支持下划线"_"，IE7、8和firefox均不支持下划线。

区别FF/IE8和IE6/7：

background:orange;+background:green;-background:blue;

或者

background:orange;*background:green!important;*background:blue;

引用显示效果：

IE6：blue

IE7：green

FF/IE8:orange

原理：IE6能识别-，IE7能识别+，IE8和FF都不能识别+和-

IE8/FF都不识别*，IE7优先识别!important，IE6不能识别!important。

关于IE8的hacks：

.test{

color:/*\**/#00f\9; /* IE8 only */

color:#00f\9; /* 适用于所有IE版本 */

}

可同时区分IE8、IE7、IE6、Firefox的CSS hacks：

.test{

color:#000; /* Firefox */

color:/*\**/#00f\9; /* IE8 */

*color:#f00; /* IE7 */

_color:#0f0; /* IE6 */

}

添加相应的注释解决兼容性问题

注释相应的Css文件：

<!-->

<![endif]-->

<!-->

<![endif]-->

<!-->

<![endif]-->

注释相应的Css 内容：

<!--[if ie 6]>

<style>

<!--

#warp{ padding-bottom:11px;}

-->

</style>

<![endif]-->

<!--[if ie 7]>

<style>

<!--

#warp{ padding-bottom:11px;}

-->

</style>

<![endif]-->

<!--[if ie 8]>

<style>

<!--

#warp{ padding-bottom:11px;}

-->

</style>

<![endif]-->

CSS在IE6,IE7,FIREFOX中的区别

2009-05-22 18:49CSS在IE6,IE7,FIREFOX中的区别

第一种，是CSS HACK的方法

height:20px; /*For Firefox*/

*height:25px; /*For IE7 & IE6*/

_height:20px; /*For IE6*/

注意顺序。

这样也属于CSS HACK，不过没有上面这样简洁。

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

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

第二种是使用IE专用的条件注释

<!--[if IE 7]>

< ![endif]-->

<!--[if lte IE 6]>

< ![endif]-->

第三种css filter的办法，以下为经典从国外网站翻译过来的。

新建一个css样式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

新建一个div,并使用前面定义的css的样式：

在body表现这里加入lang属性,中文为zh：

现在对div元素再定义一个样式：

*:lang(en) #item{

background:green !important;

}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：

#item:empty {

background: green !important

}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。

对IE6和FF的兼容可以考虑以前的!important</body>

CSS完美兼容IE6/IE7/FF的通用简便方法

作者:pointc 日期:2008-12-02

字体大小: 小中大通常我们遇到3种情况：

IE6 正常 IE7/FF不正常

这种情况下我们这样处理：

padding: 7px !important;（针对FF/IE7）

padding: 6px;（针对IE6）

IE6 IE7正常 FF不正常

这种情况我们要这么处理，因为!important IE7也是能识别的！

padding: 7px;（针对FF）

*padding: 6px;（针对IE6/IE7）

IE6 IE7 FF都不一样

这种情况我们这样来处理：

padding: 7px;（针对FF）

*padding: 6px;（针对IE7）

_padding: 5px; （针对IE6）

注意顺序，在此多谢jonson的帮助补充！希望此贴能为那些因为浏览器的兼容问题而焦虑的同志们带来帮助！

解决IE6、IE7在CSS中设置最小高度遇到的问题

[转]2009年06月16日星期二 05:21 P.M.当设置某一个区域的最小高度为某个值的时候，在Firefox、IE6以及IE7中的表现并不一样。如果只是设定了min-height值，那么在IE6中不能识别；但设定了height值，在 IE7和Firefox中，位置就会固定了。这是一个很大的问题。那么为了协调各个浏览器和各个版本，我们怎样做才能解决最小高度的问题呢？

我在网络上寻找了一些相关资料，有一种解决方法比较好：

.distance {

height:auto!important;

height:100px;

min-height:100px;

}

!import（优先）标签在IE6中并不认识，所以在IE6中上述代码会被理解成为：

height:100px;

min-height:100px;

而在IE7中则是：

height:auto;

min-height:100px;

在这里，我们所利用的特性是：

IE6不能识别 !important 标签;

IE6不能识别 min-height 标签;

IE6中的高度(height)标签的最终效果等同于IE7与Firefox浏览器中的最小高度(min-height)标签;

最终便可以解决上述问题。

另一種方法： (這個看不懂，不過可以用)

.autoheight{ min-height:200px; height:200px;}

[class].autoheight{height:auto;}

css浏览器兼容性一览表（摘抄）2009-03-02 16:49在网上找到一个CSS hack列表，记录在这里以分析css的浏览器兼容性

另外摘抄一份目前的css浏览器兼容问题汇总，记录在这里自己好好学习一下

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.

　　CSS技巧

　　1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

　　2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

　　3.浮动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;

　　4 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;}

　　5.页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

　　6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div id="box"> <div id="left"></div> <div id="right"></div> </div>

　　7.IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

　　8.float的div闭合;清除浮动;自适应高度;

　　① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}

　　②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

　　③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一个float left而宽度是100%的DIV解决之

　　④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. /* 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 */ 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

　　11.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例： #box { } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p对象中的内容</p> </div> 解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上 border属性。

　　12 .IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

13.如何对齐文本与文本输入框加上 vertical-align:middle; <style type="text/css">  </style>

　　14.web标准中定义id与class有什么区别吗一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

15. LI中内容超过长度后以省略号显示的方法此方法适用与IE与OP浏览器 <style type="text/css">  </style>

16.为什么web标准中IE无法设置滚动条颜色了解决办法是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style>

　　17.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

　　18.怎么样才能让层显示在FLASH之上呢解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />

19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style type="text/css">  </style>

　　FF与IE

　　1. Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

　　2.链接(a标签)的边框与背景 a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: <style type="text/css">  </style>

　　4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

　　5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

　　6. FORM标签这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

　　7. BOX模型解释不一致问题在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important; #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-}

　　8.属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

　　9.最狠的手段 - !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 这句放置在另一句之上，上面已经提过

　　10.IE,FF的默认值问题或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和 IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。

　　11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }

12.FireFox下如何使连续长字段自动换行众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 <style type="text/css">  </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type="text/javascrīpt"> /* <![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ </scrīpt>

13.为什么IE6下容器的宽度和FF解释不同呢 <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style> <div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div> 问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识,请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

　　IE6,IE7,FF IE7.0 出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集.

　　第一种，是CSS HACK的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 注意顺序。这样也属于CSS HACK，不过没有上面这样简洁。 #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */

<link rel="stylesheet" type="text/css" href="css.css" />  <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->  <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

　　第三种，css filter的办法，以下为经典从国外网站翻译过来的。. 新建一个css样式如下： #item { width: 200px; height: 200px; background: red; } 新建一个div,并使用前面定义的css的样式： <div id="item">some text here</div> 在body表现这里加入lang属性,中文为zh： <body lang="en"> 现在对div元素再定义一个样式： *:lang(en) #item{ background:green !important; } 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式： #item:empty { background: green !important } :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用

让IE和Firefox兼容的CSS技巧集合css hack

标签：

原文地址：http://www.cnblogs.com/jona/p/5381498.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行