IE兼容性
1、ie兼容css3 border-radius、box-shadow、text-shadow的方法
一、ie兼容border-radius、box-shadow、text-shadow
1、下载ie-css3.htc
2、css
box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari 和 Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */ }
二、问题
1、只能同时4角圆角，不能单独设置；
2、div上可以正常使用，测试text文本框，会出现异常；
3、CSS文件要和页面在同一目录下，否则无效
4、当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
5、z-index值一定要比周围元素的要高，否则……只能说抱歉了~~
三、支持的样式及说明
参见表：
| 样式 | 生效 | 无效 |
| border-radius | 为元素四个角设置圆角属性元素边框 | 只设置一个圆角 |
| box-shadow | 模糊大小参数 偏移值 | 不支持除了黑色(#fff)以外的其它颜色 |
| text-shadow | 模糊大小参数 偏移值 颜色值 | IE下的表现与Firefox/Safari/Chrome有一点点的差异 |
1、在IE6下，块元素有浮动和横向margin值，横向的margin会变成两倍。和margin方向有关系。
解决办法:将块元素转成内嵌元素。display：inline；
2、IE6的子元素可以撑开父元素：
解决办法：进行精确的计算父子级关系。当然可以通过overflow：hidden将超出的子元素隐藏掉。
3、若元素浮动，则一行全浮动。否则会出现边距问题（主要是IE6）甚至奇葩问题，其他浏览器好像也有
4、如果给input加背景，那么在输入内容超过输入框长度时，背景会移动：
解决办法：把input放在div里面，让input的背景透明，并且把背景头给div。
5、IE6、7下几px的间隙问题：
li本身没有浮动，但是内容的浮动让li多出来几px的间隙。
解决办法：
1、给li加浮动，
2、给li加vertical-align：top/middle/bottom 也可以用来清除图片下的间隙
图片也可以display：block；解决，但是多图片同行就不行了
6、IE6最小高度问题：
元素高度小于19px的会被当做19px处理。
解决办法：
1、加font-size：0;解决办法有局限
2、overflow：hidden；
7、IE6下父级元素包不住子级的相对定位
解决办法：给父级元素定位
8、IE6下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1px的偏差。
没法解决。
9、在IE6下，解决margin传递，触发haslayout，zoom：1；
其他浏览器可以用overflow：hidden；
这其实不算IE的bug，浏览器都有这个问题，也可以通过添加上下padding或者border来解决。
10、IE6下，父元素有边框的时候，子元素的margin消失了：
解决办法同上。
11、IE6:当一行子元素宽度之和与父级相差大于3像素或者有不满行状态的时候，最后一行的margin-bottom就会消失。
目前没办法解决。
12、IE6：当li间隙问题和IE6最小间隙同时存在时(li本身没浮动，但是其中内容有浮动导致其下面有间隙：给li加vertical-align属性）
解决办法：overflow：hidden，float：xx;
13、IE6文字溢出bug：
子元素宽度和父元素宽度相差小于3px的时候，两个浮动元素中间有注释或者内嵌元素。
解决办法：把内嵌去掉或者调整父级大小。
14、IE6 当绝对定位和浮动元素并列的时候，绝对定位元素会消失。
解决办法：自然是去掉并列关系。给定位包个div
15、IE6下，当thead、tbody、tfoot和下面的tr同时加样式，tr的样式会代替父元素的样式。
没有解决办法。
16、IE6、7下输入类型的表单控件，默认上下有1px的边距。
解决办法：让控件脱离文档流。
17、输入类型表单控件border：none；无效
解决办法：border：0，或者给input重置背景。
hack是一种解决兼容性很好的办法，但是现在开发不怎么赞成使用，注意尽量少使用吧！
1、条件注释法（一般使用在IE6-IE9）：
只在IE下生效：
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效：
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE8以下生效：
<!--[if lt IE 8] 这段文字只在IE8浏览器以下显示 <![endif]-->
只在IE6以上版本生效：
<!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]-->
只在IE8上不生效：
<!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->
非IE浏览器生效：
<!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->
2、属性前缀法：
标准模式下：
#selector{
-color: red; /* 减号和下划线是IE6专有的hack */
color：blue\9; /* \9 IE6-IE10都生效 */
color: pink\0; /* \0 IE8-IE11生效 */
color: green\9\0; /* \9\0 IE9和IE10生效 */
*color: yellow; /* [.*+<>] IE6-IE7生效 */
}
3、选择器前缀法：
*+html selector{color:blue;} /* *+html前缀只支持IE7 */
