css hover in IE11 not returning to unhover style

i have social buttons like in this page: http://demo.themexpert.com/joomla/appy/ (on the right) when you hover this buttons in ie11 and move back they dont return to the previous state. is it a bug in IE ? is there a way to walkaround

Answers

Try and change this:

.social-icons li a { display:block;}

To this:

.social-icons li a { display:inline-block;}

Seems to fix the issue for me in IE11

Working Fiddle

I have created the fiddle fixing the issue. Tested in IE-11 works fine.

HTML

<ul id="social">
    <li>
        <a href="#" class="fb">
            <div class="social-icon"></div>
        </a>
    </li>
</ul>

CSS

#social
{
    position: absolute;
    right: 0;
}
li
{
    list-style: none;
}
.social-icon
{
    height: 40px;
    width: 120px;
    background: red;
}
.fb
{
    margin-top: 5px;
    margin-right: -75px; 
    display: block;
}
.fb:hover
{
    margin-right: 0px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}

Need Your Help