zoukankan      html  css  js  c++  java
  • 前端兼容性的一些问题

    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() 兼容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: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;
    }

    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{

      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;

    
    
     
  • 相关阅读:
    HDU2027 统计元音 一点点哈希思想
    湖南工业大学第一届ACM竞赛 数字游戏 字符串处理
    湖南工业大学第一届ACM竞赛 我素故我在 DFS
    HDU3293sort
    HDU2082 找单词 母函数
    HDU1018 Big Number 斯特林公式
    湖南工业大学第一届ACM竞赛 分糖果 位操作
    UVA 357 Let Me Count The Ways
    UVA 147 Dollars
    UVA 348 Optimal Array Multiplication Sequence
  • 原文地址:https://www.cnblogs.com/huiminxu/p/8204249.html
Copyright © 2011-2022 走看看