首页 > > 网页制作 > css >

前端兼容性的一些问题

2018-06-24 02:09:30来源：未知阅读 ()

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问题

除IE外都可识别 <!--<![endif]--

2018-01-062018-01-06

5，https://www.cnblogs.com/junjieok/p/4513363.html (ul高度塌陷，当li浮动时)

6，ie6会出现double margin的问题

/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() 兼容ie8 用法

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;
}

http://testsize.com/

9.设置宽度是100%，此时宽度是分辨率的宽度。比如当前分辨率是1024则，width为1024 ，如果当前分辨率的宽度是1200则width为1200

10.IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟

https://jingyan.baidu.com/article/2a138328971e8c074a134f82.html

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使用后的问题。