IE 11 negative margin bug ! [Alternate Solution]

I had the below class applied on a div tag which had an image inside it. The image was positioned correctly in all other browsers except IE 11. On searching it came out that IE 11 has this bug related to negative top margin.

.headerImage 
{ 
 position: relative; 
 margin-top:-100px ;
 left: 150px;
}

I tried fixing it by adding clear:both to the div tag but did not work for me.

So had to add condition to detect the browser and apply different margin for IE 11.

/*------style for all other browsers---------*/
 .headerImage
 {
 position: relative;
 margin-top:-100px ;
 left: 150px;
 }
 /*------Specific style for IE11---------*/
 _:-ms-fullscreen, :root
 .headerImage
 {
 position: relative;
 margin-top:-95px ;
 left: 150px;
 }

_:-ms-fullscreen, :root identifies if the browser is IE 11 and then applies the corresponding CSS.

This solved the UI issue for me.

Thanks for checking out !