搜尋

首頁  >  問答  >  主體

css - 在IE678下用什么方法解决伪类last-child?

我知道可以通过给最后一个添加class,但是这个是所有浏览器下都添加class,那last-child不用都可以了。


这问题应该放在新手下面的,但习惯性直接在首页撰写,所以...


开始我是有找下解决的方法。
一般last-child都是用在菜单或者列表用边框分隔的时候,把最后面一个border的设定去掉。

一种方法是给最后一项添加一个class,例如.last-child,把border设为none值。(这个不便于数据绑定,不然又得判断最后一个,麻烦)。

一种方法是通过js把最后最后一项的边框值去掉,达到last-child的目的:

if ($('html').hasClass('lt-ie9')) {
    $('[data-fix-last-child]').each(function () {
        var $me = $(this);
        var element = $me.data('fix-last-child');
        $me.find(element).last().css({ 'border': 'none','background': 'none' });
    });
}

但是上面两种方法都是所有浏览器下都生效,也就是不用last-child都可以了。当然也可以判断是IE678的时候才使用上面的方法,但没什么必要。

还有一种方法是使用:

expression(this.nextSibling==null?'0':'1px');

没试过,因为不支持IE8。

天蓬老师天蓬老师2864 天前1368

全部回覆(13)我來回復

  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:09:27

    僅僅是分隔的場景的話,可以用first-child啊,讓first-child沒有上/左邊框就好

    回覆
    0
  • 怪我咯

    怪我咯2017-04-17 11:09:27

    有一種很簡單的方法,純CSS實現,支持IE7。
    就是使用element element即一個元素緊接著另一個元素選擇器。因為last-child元素是沒有緊跟這的元素的,element element為CSS2選擇器。
    舉個栗子:

    <ul>
        <li>sample text</li>
        <li>sample text</li>
        <li>sample text</li>
        <li>sample text</li>
        <li>sample text</li>
        <li>sample text</li>
    </ul>
    

    我們希望在每條記錄之間加上分隔符,一般會加border-bottom屬性,但是最後一個<li>下麵不能有,我們可以使用li li選擇符,改用border-top屬性即可實現。

    li+li{border-top: 1px dotted #999;}
    

    效果圖:

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 11:09:27

    如果你的基本目的是去掉列表項目的最後一個的border,比如想去掉list item最後一個的border-right,其實可以將每個list item的border設定成border-left,然後給每個list item添加margin-left:- border寬度就可以了。

    這是margin負邊距布局常用的方法之一

    參見資料

    負值之美:負值在頁麵布局中的應用

    CSS布局奇淫巧計之-強大的負邊距

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:09:27

    我公司隻要兼容ie10以上就行(雖然老板說ie6..)

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 11:09:27

    雷雷

    回覆
    0
  • 怪我咯

    怪我咯2017-04-17 11:09:27

    我記得ie678就不支持這個偽類last-child,這是css3裏麵的

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:09:27

    使用 JS 獲得上級元素 UL ol 然後再給最後一個元素加樣式

    回覆
    0
  • 阿神

    阿神2017-04-17 11:09:27

    ixiaohei 說的對,ie6 不支持css3,所以想通過css是無法解決的。
    題外話,現在很少人寫ie6兼容了吧,就算寫了,也是閹割版。

    回覆
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:09:27

    如果是為了做菜單列表分割的話,不妨考慮用左邊框border-left,這樣會導致第一個元素的左邊框是多餘的,但是因為所有的瀏覽器都支持first-child偽類的,所以你可以用first-child來設置第一個元素的border-left為none。以此來達到你想要的效果。

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 11:09:27

    還是用ie的html條件注釋吧,在ie678的時候使用你寫的那段js。

    回覆
    0
  • 取消回覆