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 !
Cloud and DevOps Professional and previously a C# ASP.NET Developer with keen interest in system design and architecture. Currently involved in projects using AWS, Azure, Automation, Monitoring, REST APIs and DevOps. Email: [email protected] / [email protected]
Latest posts by Abhimanyu (see all)
- Switch between multiple proxies in Chrome browser [ProxySwitchy Guide] - February 12, 2016
- CISCO VPN CLIENT -REASON 442: FAILED TO ENABLE VIRTUAL ADAPTER [Fix] - January 31, 2016
- CynogenMod 13 (Android Marshmallow [6.0]) on Samsung Galaxy S3 GT-I9300. [21-12-2015] - December 21, 2015
