兼容古董级IE小结_html/css_WEB-ITnose

IE6已经死亡，当然7，8，9，10也挂掉了。微软对IE11更下了狠手，对其停止了更新。以为前端就可以安安心心地写代码了。可是就是有些顽固分子，竟然用的还是IE6，尊崇客户至上的原则，就恶心着给他兼容老古董。

IE条件注释，微软官方推荐的hack方式

1 2 3 4 5 这段文字只在非IE浏览器上显示!--

google的ie7 – js，它是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使 得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式（推荐）

以下两个是不推荐的，我在浏览器出现了问题

1.使IE5,IE6,IE7兼容到IE8模式

万能 float 闭合

相信这个hask大家都不陌生，给需要闭合的div加上 class="clearfix" 即可。

 1 /* Clear Fix */ 2 .clearfix:after{ 3     content:"."; 4     display:block; 5     height:0; 6     clear:both; 7     visibility:hidden; 8 } 9 10 .clearfix{11     display:inline-block;12 }13 14  15 /* Hide from IE Mac */16 .clearfix {display:block;}17 /* End hide from IE Mac */18 /* end of clearfix */

对IE6PNG显示问题

只需将透明png图片命名为 *-trans.png ，但此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。

marging与padding引起高度不适应

FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决，随着IE7对!important的支持，!important 方法现在只针对IE6的HACK。)。高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例：

CSS：#box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

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

居中问题.

1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)

浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,不可控制(内嵌元素);

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

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码

标准模式和怪异模式盒模型：

标准模式下：Element width = width + padding + border

怪异模式下：Element width = width

IE6下某些情况line-height无效

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；同时以上元素的行高可能×2。

解决办法：
对和文字相连接的img、input、textarea、select、object等元素加以属性：
{margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;}

其它

1, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
2, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
3, 作为外部 wrapper 的div不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

4,按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题。解决办法：input,button{overflow:visible;}

5,button重置css样式兼容ie6,ie7，需要设置overflow:visible

6,IE6下无法定义很小的高度：如1px.。因为u默认会有行高，添加line-height:即可