前端兼容性的一些问题
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:red\9; /*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;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
text-ellipsis{
width: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:1\9;
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使用后的问题。
![](https://images2018.cnblogs.com/blog/1300352/201806/1300352-20180612155058376-904449240.png)
![](https://images2018.cnblogs.com/blog/1300352/201806/1300352-20180620102325824-1433216397.png)
****span标签对于margin-top,margin-bottom无效,但是margin-left,margin-right却是有效的。
img:border:none;