Margins changing on hover in IE11

Question

I'm having some trouble with margins when viewing http://happyhourproductions.co.uk/tv-commercial-production.html in IE11.

Under the 'More like this' section on the right of this page, if you hover over either of the first two linked images the associated margin appears to change. Moving the cursor off does not change it back, but moving the cursor over any of the other links in that column does.

I thought it might be this bug: http://haslayout.net/css/Percentage-Padding-Margin-Bug but neither of those solutions worked.

I also found this question that might also be the same but without any solution: IE9 img hover add's margin to bottom

Here is the CSS, it was built using Twitter bootstrap and LESS if that's important?

.work .sidebar .morelikethis {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    margin-bottom: 10.2564%;
    margin-top: 7.69231%;
    overflow: auto;
}

and here is the HTML

<h2>More like this...</h2>
<p>
<a class="morelikethis" title="DRTV Commercials" href="drtv-production-company.html">
</p>
<p>
<a class="morelikethis" title="Animation" href="animation-production.html">
</p>
<div class="newsflash">
<a href="/news/2013/05/happy-hour-productions-launches-new-quickquid-drtv-advertising-campaign/">
</div>

Answer 1

Your problem is caused by the default CSS of IE11. You could fix this by setting all the margins to 'morelikethis':

.morelikethis:hover {
    margin-left: some value;
    margin-right: some value;
    margin-bottom: 10.2564%;
    margin-top: 7.69231%;
}

Make it shorter:

.morelikethis:hover {
    margin: top right bottom left;
}

Also, I would suggest using a CSS reset so that the browsers' default CSS doesn't mess with the styling. Here is a good one: https://code.google.com/p/reset5/ Before including this script in your CSS, consider the fact that you will most likely end up having to redo a lot of your styling.