1，ie7 ie8中出现横向下拉框
原因在于：（1）css3的transition，keyframes属性不支持，使得动画效果的top left定位的值无法更改，图片占据空间。从而会出现滚动条。。。
2,ie7 ie8中div掉落
原因：（1）width：调整 （2）float影响：并列元素调换顺序
各浏览器对css百分比小数点的解析:ie7:四舍五入（需要特别注意的是：外层div99厘米，ie7 中，直接按照四舍五入，内层两个元素的宽度都是 50px，加起来超过外层宽度，即外层包容不下2个50px的内层，所以ie7下看到两个内层是换行的！）
3，图片显示不正常
原因：（1）ie7 ie8不支持background-size：cover属性 解决：下载 backgroundsize.min.htc
4，对应不同的ie添加附加的css样式，解决hack问题
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->2018-01-062018-01-06
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
5，https://www.cnblogs.com/junjieok/p/4513363.html (ul高度塌陷，当li浮动时)
6，ie6会出现double margin的问题
7,
/html5.min.js
/respond.min.js
<!--[if lt IE 9]>
<script src="${pageContext.request.contextPath}/resources/lib/fixed/html5.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/lib/fixed/respond.min.js"></script>
<![endif]-->
8,ie8不支持rem border-radius 伪元素
background: rgba(255,255,255,.1);//火狐，谷歌等
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);//兼容IE
这个颜色“#19ffffff”是由两部分组成的。
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；都是白色。
.ie6_7_8{
color:blue; /*所有浏览器*/
color:red9; /*IE8以及以下版本浏览器*/
*color:green; /*IE7及其以下版本浏览器*/
_color:purple; /*IE6浏览器*/
}
8,ie8只支持一个：Before不支持::before
ie8中通过：before来写background-color：或者opacity，不管有没有写兼容性都不起作用，解决办法应该放在一个div中进行处理
.subjectTop .subjectTop-shadow {
background: #FFFFFF;
background-color: rgba(255, 255, 255, 0.8);
filter:alpha(opacity=80);
display: block;
100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
text-ellipsis{
500px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;
}
多行文本溢出出现省略号
<p class="eclips">${topic.topicDesc} </p>
/*判断有没有超过三行*/
if($(".eclips").height()>=104){
$(".eclips").addClass("eclips1");
}
//css
.subjectTop .subjectcont p{
padding:0px;
margin:0px;
margin-top: 15px;
margin-bottom: 30px;
font-size: 1.33333rem;
color:#4d4e53;
line-height:26px;
height:104px;
overflow: hidden;
position: relative;
}
.eclips1:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 16px;
background: -webkit-linear-gradient(left, white, white 50%);
background: -o-linear-gradient(right, white, white 50%);
background: -moz-linear-gradient(right, white, white 50%);
background: linear-gradient(to right, white, white 50%);
}
http://blog.csdn.net/boy7607891xy/article/details/28594897
如果给空a标签定义了宽度和高度且使用了absolute，则在IE6和IE7中点击无效。
ie7图片超链接不要将图片作为a的背景图，直接插入img即可，不然ie7会出现bug
透明度的兼容问题
opacity:0.7;
-moz-opacity:0.7;
filter:alpha(opacity=30);
opacity:19;
9，https://www.cnblogs.com/EnSnail/p/6792853.html 字体影响布局（本电脑有此字体，服务器端无此字体，会出现布局的问题）
http://blog.csdn.net/athrenzala/article/details/45430963
兼容addeventlistener 与removeeventlistener
http://blog.csdn.net/lihefei_coder/article/details/73335581
1.background-size.htc使用后的问题。
****span标签对于margin-top,margin-bottom无效，但是margin-left,margin-right却是有效的。
img：border：none;