--a:
link{}a:
visited{}a:
hover{}a:
active
{}-->
4、游标手指cursor:
cursor:
pointer可以同时在IEFF中显示游标手指状，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;}给定义死了，所
以后面就不会为这个头疼了。
（在公共样式，如style.css里面就把这些定义死。
）
7、BOX模型解释不一致问题：
在FF和IE中的BOX模型解释不一致导致相差2px。
解决方法:
div{margin:
30px!
important;margin:
28px;}注意这两个margin的顺
序一定不能写反，important这个属性IE不能识别，但别的浏览器可以识别。
所以在
IE下其实解释成这样：
div{maring:
30px;margin:
28px}。
重复定义的话按照最后一
个来执行，所以不可以只写margin:
xxpx!
important;#box{width:
600px;//for
ie6.0-注：
所有浏览器都能识别。
w\idth:
500px;//forff+ie6.0，ie低版本不能识别（所以前
面的宽度相当于是给ie低版本设置的）。
}#box{width:
600px!
important;//forffwidth:
600px;//forff+ie6.0width/仅ie6不识别*/:
500px;//forie6.0-}
8、CSSHack汇总快查：
清除浮动：
select:
after{content:
".";display:
block;height:
0;clear:
both;visibility:
hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题截字省略号：
select{-o-text-overflow:
ellipsis;text-overflow:
ellipsis;white-space:
nowrap;overflow:
hidden;}
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。
只是目前Firefox并不支持。
只有Opera识别：
@mediaalland（min-width:
Opx）{select{}}
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。
这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
IE5.x的过滤器，只有IE5.x可见：
@mediatty{
i{content:
"\";/*""*/}}@import'ie5win.css';/*";}
}/**/IE5/MAC的过滤器，一般用不着：
/*\*//*/
@import"ie5mac.css";
/**/
IE的if条件Hack：
--[ifIE]>OnlyIE
[endif]-->
所有的IE可识别
--[ifIE5.0]>OnlyIE5.0
[endif]-->
只有IE5.0可以识别
--[ifgtIE5.0]>OnlyIE5.0+
[endif]-->
IE5.0包换IE5.5都可以识别
--[ifltIE6]>OnlyIE6-
[endif]-->
仅IE6可识别
--[ifgteIE6]>OnlyIE6/+
[endif]-->
IE6以及IE6以下的IE5.x都可识别
--[iflteIE7]>OnlyIE7/-
[endif]-->
仅IE7可识别
9、属性选择器（这个不能算是兼容，是隐藏css的一个bug）:
p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏，FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了，属性选择器的范围比较大，如p[id]中，所有p标签中有id的都是同样式的。
10、最狠的手段-!
important;如果实在没有办法解决一些细节问题，可以用这个方
法.FF对于”!
important”会自动优先解析然而IE则会忽略.如
下.tabd1{background:
url（/res/images/up/tab1.gif）no-repeat0px
0px!
important;/*StyleforFF*/background:
url（/res/images/up/tab1.gif）norepeat1px0px;/*StyleforIE*/}值得注意的是，一定要将xxxx!
important这句放
置在另一句之上，上面已经提过。
11、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了。
12、为什么FF下文本无法撑开容器的高度：
标准浏览器中固定高度值的容器是不会象
IE6里那样被撑开的，那我又想固定高度，又想能被撑开需要怎样设置呢？
办法就是去掉height设置min-height:
200px;这里为了照顾不认识min-height的IE6可以这样
定义:
{height:
auto!
important;height:
200px;min-height:
200px;}。
13、firefox下如何使连续长字段自动换行：
众所周知IE中直接使用word-
wrap:
break-word就可以了，FF中我们使用JS插入
的方法来解决--div{width:
300px;word-wrap:
break-word;border:
1px
solidred;}-->aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
[CDATA[*/functiontoBreakWord（el,intLen）{varobj=document.getElementByld（el）;
varstrContent=obj.innerHTML;varstrTemp="";
while（strContent.length>intLen）{strTemp+=strContent.substr（O,intLen）+"
";
strContent=strContent.substr（intLen,strContent.length）;}
strTemp+="
"+strContent;obj.innerHTML=strTemp;}if（document.getElementByld
&&!
document.all）toBreakWord（"ff",37）;/*]]>*/
14、为什么IE6下容器的宽度和FF解释不同呢
xmlversion="1.0"
encoding="gb2312"?
>VDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml
展开阅读全文
相关搜索
资源标签
升级会员 