IE内核情况下解决line-height不兼容的问题（如，360安全浏览器、edge ）

IE内核情况下解决line-height不兼容的问题（如，360安全浏览器、edge ）

    

    xxxxxxxxxxx 
    

li {
      list-style: disc;
    font-size: 16px;
    position: relative;
    line-height: 48px \9; /*IE8*/
    *line-height: 48px; /*IE7*/
    _line-height: 48px; /*IE6支持*/
    -moz-line-height: 48px; /*Firefox*/
    -ms-line-height: 48px; /*IE9+*/
    line-height: 48px;
}

li p {
    width: 394px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
li p span {
    position: absolute;
    right: 0;
    top:0;
    display: inline-block;
    font-size:14px;
}

我需要的是“xxxxx”部分溢出出现省略号，span 标签位于右边；基于我写的这种结构，在非ie内核上是没有任何问题的，是可以出现所需要的效果的；

需要的效果图

但是呢在edge 和360安全浏览器都出现了问题（没办法，甲方爸爸就喜欢用这些ie呀360呀o(╥﹏╥)o）

IE内核浏览器下的效果图

看看就是这种效果，为什么不是同一条消息呢，那是因为那一条消息已经不知道掉到哪里去了o(╥﹏╥)o，百度了很多，有说将line-height设置为0，加padding的，没有用呀，字都只有半截，这不一样凉凉的节奏，当然加前缀的这个也是没有用的，没办法只能改变策略了，

    

        XXXXXXXXXX 
    

li  p span:first-child {
    position: absolute;
    left:0;
    top:0;
    width: 394px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

给第一个span也加上绝对定位，然他们一起脱离文档流，这样就不用担心了；其实我感觉这样有点避重就轻，另辟蹊径来解决这个问题，但是没办法呀，我目前只能想到这个法子，去解决甲方爸爸的问题了。

当然如果你们不需要超出部分显示省略号的话，还是有一种方法的

 p  {
    width: 394px;
    overflow: hidden;/*必须要加哦，不加在谷歌会出现一些问题*/
    /*white-space: nowrap;
    text-overflow:ellipsis;*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

采用多行的超出省略的方法写，但是呢，

IE情况下的图片

超出的办法在ie的情况就没办法解决了，这明显不符合我们甲方爸爸的需求，所以这适合没那么多话需求的方法；