在iPad / iPhone上删除CSS Margin

Question

On an e-commerce website that I set-up Link on a page that has 4 alternative product views (they are the 4 small images underneath the add to basket) On an iPhone or iPad the 4th image isn't having its right margin removed so it goes onto the next line.

Basically each images has a 10px right margin, and then the last image that has a class of 'end' has a right margin of '0px !important'.

This works fine in web browsers but on the iPad / iPhone the 0px right margin is not being applied.

I have a feeling this is going to be an easy one but I just can't see it, thanks in advance for any help.

EDIT I have added the code below and have also set-up a stripped down version of the page I am having the problems on: link , it is the 4 small images at the bottom of the right hand side.

Below is the HTML for the images:

<div class="image-additional">
    <img alt="" title="" src="larchblue-cr-55x55.jpg" class="thumb ">
    <img alt="" title="" src="larchgreen-cr-55x55.jpg" class="thumb ">
    <img alt="" title="" src="larchpink-cr-55x55.jpg" class="thumb ">
    <img alt="" title="" src="larchyellow-cr-55x55.jpg" class="thumb end">
</div>

And here is the CSS:

.image-additional {
    width: 268px;
    margin-top: 13px;
    clear: both;
    position: absolute;
    bottom: 0;
    overflow: hidden;
}

.image-additional img {
    border: 1px solid #E7E7E7;
    margin-right: 10px;
}

.image-additional img.end, .image-additional img:last-child { 
        margin-right: 0px !important;
}

Answer 1

Try using :last-child pseudo element for your mobile targets.

.img:last-child {
  margin-right: 0px;
}

Note: It works everywhere except for IE8 and below.