What methods do you use in ie678 to resolve last?

115 5

I know that you can add class by adding a class to the last, but that's all the browsers add class, and the last child doesn't have to do it.

The problem should be placed under a novice, but the habit is written directly on the front page, so.

I'm starting to find a way to solve it.
Generally, last-child is used to remove the final border settings from the menu or column table when it's separated by a border.

One way to add a class to the last item, such as .last-child, set border to none value. ( this isn't easy for data binding, otherwise it isn't possible to judge the last, trouble ).

A method is to remove the last item border value from js to achieve the purpose of 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' });
 });
}

But both of these methods are in effect under all browsers, and that isn't the case. Of course it's possible to use the above method for ie678, but there's no need to do it.

There's another way to use:

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

Try not to do this because isn't supported.

13 Answers

85 2

There's a simple method, pure css implementation, support for ie7.
Is to use element+element as an element immediately followed by another element selector. Because the last child element isn't followed by the element, element+element is the selector.
For:

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

We want to add a delimiter between each record, generally add the border bottom attribute, but the last <li> cannot be followed, we can use li+li selectors to implement.

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


76 1
/** HTML */
<ul class="element">
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 <li>item 5</li>
</ul>
/** CSS */
.element:last-child,
.element.last-child{.. . }
/** JS */
if( IE6 || IE7 ||.. . ) {
 $('.element').children('li:last-child').addClass('.last-child');
}
...