Search code examples
htmlcssmedia-queriesinternet-explorer-11

HR tag alignment as per the device-width not working on IE11 browser

I have added the HR line below some content like below:

<style>
    .h-divider{border: 2px solid #f3a51f; width:80px;}

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .h-divider{margin-right:0;}
    }
    @media (min-width: 768px){
    .h-divider{margin-right:0;}
    }
    </style>


<hr class="h-divider"/>

Here I want the Hr (divider) should be at right-side on large devices and that should be at the center (bydefault) on small devices.

The above css is properly working on Chrome and Firefox but not reflect on IE (11) browser. Please advice.

Solution

  • I tested the issue with IE 11 and I can see the issue.

    In the testing result, I noticed some things which I am sharing here.

    1. Your media query is not executing in IE 11 browser.

    I found in my testing that below is the code which is only working for IE 11 browser.

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}

    So you need to use this code to target IE 11 browser.

    1. I noticed that width:20% is playing some role here.

    When you use the width then it will not show you the right-margin properly and the line will display in the middle of the window.

    1. To see the effect of right-margin you need to remove the width and increase the right-margin to around 100px to see the noticeable difference.

    2. I noticed that the nested media query is also not working in IE 11 browser. So you can not put the query to check the min-width. If you put it outside then also it will not work as only the above-mentioned media query is working for IE 11.

    In that situation, I suggest you use the above-mentioned media query for IE 11. Don't use a width in it and just set the required right-margin. You can try to make some tests by wrapping the HR with DIV's.