目录
1. IE6双边距问题:
问题描述：
浮动元素拥有同向margin值（left和margin-left，right和margin-right），在ie6s上第一个元素会出现双边距。
解决方案：
解决：ie6 _display:inline;_针对ie6
body{margin:0;}
div{
float:left;
margin-left:10px;
width:100px;
height:100px;background:red;
_display:inline;}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
2.子元素相对定位父元素溢出隐藏失效
问题描述
子元素定位，它的定位为定位，子元素超出父元素的大小。仅仅给父元素overflow:hidden属性，在IE浏览器上不会隐藏溢出的子元素部分。
解决方案：
除了给父元素加overflow:hidden还要给定位父元素加：position:relative；
.box{width:200px;height:200px;background:red; overflow:hidden; position:relative;}
.box2{width:100px;height:300px;background:green; position:relative;}
<div class="box">
<div class="box2"></div>
</div>
图片描述
定位父元素不加定位情况下：
定位父元素定位之后
3. IE转内联块失败
问题描述：
display:inline-block;在IE6和IE7上面转换失败。
解决方案：
*display:inline; *zoom:1;
.box{ display:inline-block;width:200px;height:200px;border:1px solid red;display:inline;*zoom:1}
<div class="box"></div>
<div class="box"></div>
图片描述
4. IE中input输入文字不垂直居中
问题描述：
在IE中文字输入不垂直居中
input{border:none;background:none;line-height: 60px}
.bg{ border:1px solid #000;background:url(so_bg.jpg) no-repeat left center;width:200px;height:60px;}
<input type="text" class="bg"/>
<div class="bg">
<input type="text" style="width:200px;height:60px;"/>
</div>
解决方案：
line-height:高度值.px
图片描述
5 input背景问题
问题描述：
如上面图片显示一样，背景图片会遮盖输入文字。
解决方案：
给inut在相应的padding值：比如padding-left:30px;
这样文字就显示在背景图片的右边而不会被文字遮住。
图片描述
6 li的子元素浮动间隙问题
问题描述：
li的子元素浮动时，IE6和IE7会产生间隙问题。
解决方案：
在<li>上加：vertical-align:middle/top/bottom;
.list{margin:0;padding:0;list-style:none;width:300px;}
.list li{height:30px;line-height:30px;background:red;/*vertical-align:middle;*/}
.list li a{float:left;}//li子元素浮动
.list li span{float:right;}
<ul class="list">
<li><span>2017-05-23</span><a>新闻内容</a></li>
<li><a>新闻内容</a><span>2017-05-23</span></li>
<li><a>新闻内容</a><span>2017-05-23</span></li>
<li><a>新闻内容</a><span>2017-05-23</span></li>
<li><a>新闻内容</a><span>2017-05-23</span></li>
</ul>
图片描述
7. IE6最小高度
问题描述
IE6元素在高度小于19px时，会以19px显示。
.box{height:6px;background:red;font-size:0;}
<div class="box"></div>
8 IE6 最小高度
问题描述：
IE6不支持min-height,针对ie6添加height，在ie6可以有同样效果
min-height ：1 最小高度（可以使元素在内容少时显示为最小高度指定的值，内容多时撑开自适应）
2 能大于，不能小于，最小这个高度
解决方案
_height:300px;
9 IE下PNG24支持问题
问题描述
在IE6下png24图片显示为不透明
解决方案
- 适情况而定，优先使用jpg 或者 png8,gif
- js方法解决（适用于透明背景和透明图片）
JS解决方案：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.pngpic,.logo');
</script>
<![endif]-->
<style type="text/css">
.bg{width:218px;height:288px;background:url(bg.png) no-repeat;_background:url(bg2.png) no-repeat;}
.bg{width:218px;height:288px;background:url(bg.png) no-repeat;}
</style>
</head>
<body style="background:red;">
<img src="bg.png"/>
<div class="bg"></div>
<img src="bg.png" class="pngpic"/>
<div class="bg logo"></div>
<img src="../../2.png"/>
</body>
</html>
10.浮动注释在IE6造成谍影
问题描述
运行代码，在IE6下会多出一只“鬼”。
.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}
<div class="test">
<div class="box1"></div>
<!-- 注释 -->
<div class="box2">↓你是什么鬼</div>
</div>
解决方案：
造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。
- 删除box1和box2之间所有的注释；
- 不设置浮动等。
图片描述
11 hack条件注释语句
<!--[if IE]>
只能被 IE 识别;
<![endif]-->
<!--[if IE 6]>
这是ie6
<![endif]-->
<!--[if IE 7]>
这是ie7
<![endif]-->
<!--[if IE 8]>
这是ie8
<![endif]-->
<!--[if gt IE 6]>
这是大于ie6
<![endif]-->
<!--
gt（greater than） 大于
gte（greater than or equal）大于等于
lt（less than） 小于
lte（less than or equal） 小于等于
! 非
-->
<!--
IE 条件注释判断语句是 IE 特有的功能，通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容
自IE10起，标准模式不再支持条件注释
-->
12 CSS-hack属性级
什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS hack分类
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
- 属性前缀法(即类内部Hack)：例如 IE6能识别下划线"“和星号” * “，IE7能识别星号” * “，但不能识别下划线”"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
- 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
- IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
.box{width:200px;height:200px;background:red;
*background:blue;background:pink\9;//css hack
} .box2{width:100px;height:100px;background:blue;
_background:green;//css hack
}
<!--
* ie6 7
_ ie6
\9 选择IE6+
-->
<div class="box"></div>
<div class="box2"></div>
图片说明
13 !important 优先级
问题描述：
！important优先级高于行间样式
.box{width:100px;height:100px;background:red!important;}
<!--
!important提升样式优先级
高于
行间样式
-->
<div class="box" style="background:pink;"></div>
图片描述
背景由于优先级的问题显示的并不是pink粉红色。
