CSS浏览器兼容大总结
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*/}
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>
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 {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属性。
19.怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二 <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；这个的意思就是在父级元素内的内容居中。
3. 超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了，很多人应该都遇到过这个问题，解决方法是改变 CSS属性的排列顺序: L-V-H-A Code: <style type=＂text/css＂> <！-- a:link {} a:visited {} a:hover {} a:active {} --> </style>5.UL的padding与margin ul标签在FF中默认是有padding值的，而在IE中只有margin默认有值，所以先定义 ul{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；
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 这句放置在另一句之上，上面已经提过
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:100px； word-wrap:break-word； border:1px solid red； } --> </style> <div id=＂ff＂>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</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>