Solution 1 :

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.

Problem :

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

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

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @media (min-width: 768px){

<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.


Comment posted by…

You should change your hr for a div. Check out this answer: [

Comment posted by Amruta

In above @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}. We didn’t mention any device width, So how it will reflect on large devices (i.e. I want middle margin on small devices and right-margin on big devices)

Comment posted by Amruta

Please see the above edited code as you suggest. Is it right? Because it still won’t reflect on IE 11. Suggest for any changes in the above code.

Comment posted by Deepak-MSFT

Try to remove the Width:80% and increase the margin-right to around 100px then you can notice the result. In short, show the same horizontal line for all the screen sizes specifically for IE to avoid this media query issue.

Comment posted by Amruta

But when I removed the HR width, it will occupied our full with that I don’t want. And bydefault HR aligned centered only and I want it should be align-right on large devices. Now suggest me!