Are you looking for a solution to address nested media queries in Internet Explorer?

Question

Are you looking for a solution to address nested media queries in Internet Explorer?

My HTML and CSS code is looking fantastic and responsive on all browsers except for IE (specifically tested in IE11). It seems that IE is not interpreting the padding correctly, causing an issue with text placement. To address this problem, I decided to utilize a media query:

@media only screen and (max-width: 1200px) {

    /* some css stuff */

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

        /* Implementing specific CSS for IE within a max-width of 1200px */
    }
}

This approach effectively targets the browser; however, it has introduced a new challenge. Since I am making the site responsive without using Bootstrap or any other framework, I rely heavily on media queries. Unfortunately, IE does not support nested media queries.

As a result, my design is no longer as responsive as intended. Are there any alternative solutions or workarounds that I may have overlooked?

html css internet-explorer media-queries responsive

Answer 1

Answer №1

Rework your @media queries to eliminate nesting - although this may require duplicating some rules (consider utilizing tools like Sass or T4 if you favor Visual Studio).

Original Structure:

@media only screen and (max-width: 1200px) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }

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

        /* CSS specific to IE within a max-width of 1200px */
        .ieRule1 {
            color: blue;
        }
    }
}

Revised Approach:

@media only screen and (max-width: 1200px) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }
}

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

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }

    .ieRule1 {
        color: blue;
    }
}

Answer 2

Rework your @media queries to eliminate nesting - although this may require duplicating some rules (consider utilizing tools like Sass or T4 if you favor Visual Studio).

Original Structure:

@media only screen and (max-width: 1200px) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }

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

        /* CSS specific to IE within a max-width of 1200px */
        .ieRule1 {
            color: blue;
        }
    }
}

Revised Approach:

@media only screen and (max-width: 1200px) {

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }
}

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

    .rule1 {
        color: black;
    }

    .rule2 {
        color: red;
    }

    .ieRule1 {
        color: blue;
    }
}

Are you looking for a solution to address nested media queries in Internet Explorer?

Answer №1

Original Structure:

Revised Approach:

Similar questions

Incorporating the <sub> element while maintaining the line height

Initiate playing YouTube videos by clicking on an image using HTML and CSS

Angular Components unexpectedly lose background transparency when using Transparent-Background-PNG in the foreground

Using jQuery to transform HTML data attributes into an array

Revamping the Look: Refreshing Background of Div

What is the best way to ensure that my divs adjust to fit the remaining space, irrespective of the number I create

ErrorType at /create Listing() received an unexpected argument: 'description'

Having trouble retrieving the text of an element using Selenium

What is the best way to calculate the width of an element that exceeds its container using javascript?

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

Can CSS selectors be grouped together under the same root?

Discover more about the Magento module/script by reading further

Enhancing the visual appeal of HTML code in "view Source" by injecting it using a System.Web.UI.WebControls.Literal

My website displays perfectly on both iPhone 4 and iPhone 4S

Adjust the minimum height and width when resizing the window

Ensure that the icon at the conclusion of the <p> tag remains intact and does not break off on its

Learn how to capture a WebSocket connection at 'ws://' that was not successful: Error encountered during connection establishment: net::ERR_CONNECTION_REFUSED

What is the reason for making the position of bg-container absolute?

The code is malfunctioning on this site (yet functions perfectly on a different website)

Eliminate screen flickering during initial page load