首先，我在把 ie 浏览器更新到 11 后，在 f12 调试工具中发现一片空白，解决方法如下：
安装补丁：
64位的系统应该使用下面这个补丁：http://www.microsoft.com/en-us/download/details.aspx?id=45154
32位的系统应该使用下面这个补丁：http://www.microsoft.com/zh-CN/download/details.aspx?id=45134
接下来讲解 css 兼容 ie 的方法。
一、以插件形式的兼容方法
1、首先去除各浏览器差异，或使用如下插件，或使用自己所编写的 reset.css 文件
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
2、解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js">
</script>
<![endif]-->
3、解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </script>
二、兼容性书写
1、兼容前缀
-
-o-transform:rotate(7deg); // Opera
-
-ms-transform:rotate(7deg); // IE
-
-moz-transform:rotate(7deg); // Firefox
-
-webkit-transform:rotate(7deg); // Chrome
-
transform:rotate(7deg); // 统一标识语句
2、解决 Placeholder
<input type="text" value="Name *" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name *';}">
3、解决 IE9 以下浏览器不能使用 opacity
-
opacity: 0.5;
-
filter: alpha(opacity = 50);
-
filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 50);
更多兼容性解决方法：http://www.chinaz.com/web/2017/0830/800058.shtml
三、css hack
1、条件 hack
语法：
<!--[if <keywords> IE <version>]>
HTML代码块
<![endif]-->
注：条件 hack 只在 ie 10 以下有效
详情：http://www.css88.com/book/css/hack/conditions.htm
2、属性级 hack
语法： selector{<hack> property:value<hack> ;}
eg: *color: #ff0; 或 color: #ff0\9;
详情：http://www.css88.com/book/css/hack/properties.htm
3、选择符级 hack
语法：<hack> selector{ sRules }
详情：http://www.css88.com/book/css/hack/selectors.htm
更多css hack 标识符见：https://baike.baidu.com/item/css%20hack/7026361?fr=aladdin
四、hack 的应用情景及技巧