廖鑫豪的个人博客

@lxhcool

男,爱好女

文章 8
朋友 7
来访 11

工具

框架

灵感

社区

资源

酷站

RANKINGS

    • 杭州
    • https://www.lxhcool.cn
    • 网站成立551天

    lxhcool

    • 默认

    (笔记)经常会遇到的一些css兼容性问题

    有些想说的话:ie就是个毒瘤,强烈抵制使用ie,强烈抵制使用ie,强烈抵制使用ie

    nth-child() 选择器兼容性问题

    解决方法:使用jq来解决,虽然也有其他方法,不过个人认为这种方法最直接简单

    $(".main ul li:nth-child(4n)").css("margin-right", "0px");

    opacity() 透明度兼容性问题

    解决方法:设置0.5的透明度如下,按理来说可兼容所有浏览器

    .opacity {
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
    }

    display:inline-block;行内块状元素兼容性问题

    解决方法:可兼容所有浏览器

    display:inline-block;
    *display:inline;
    *zoom:1;

    设置半透明背景色rgba()兼容性问题

    解决方法:使用ie的filter来解决,以background: rgba(50, 100, 150, 0.6); 为例子

    ul li {
        background: rgba(50, 100, 150, 0.6);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99326496,endColorstr=#99326496);
    }

    background多背景图片兼容性

    解决方法:filter,这段来源于张鑫旭-鑫空间-鑫生活

    #multi-bg {
        background: url(images/bg-image-1.gif) top left repeat;
        background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
        filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop');
    }

    单行文本超出隐藏显示省略号(好像没有什么兼容性的问题)

    .text {
        width: 280px;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
    }

    多行文本超出隐藏显示省略号兼容性问题

    //主流浏览器下
    .text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //要显示的行数,不支持ie浏览器
        -webkit-box-orient: vertical;
    }
    //ie浏览器下
    html结构
    <ul>
        <li>
             <p>这是标题</p>
             <span>这是内容,测试时多写几行</span>
        </li>
        <li>
             <p>这是标题</p>
             <span>这是内容,多写几行</span>
        </li> 
    </ul>
    js代码
    $(".ul li span").each(function() {
        var maxtext = 90;
        if ($(this).text().length > maxtext) {
            $(this).text($(this).text().substring(0, maxtext));
            $(this).html($(this).html() + "...");
        }
    });

    Comments | 2 条评论

      游客,你好 修改资料

    *邮箱和昵称必须填写