IE Win10下display:none失效及Edge检测弹窗位置异常技术问询

Hey Ana, let’s dive into those frustrating IE11 problems you’re seeing—legacy browsers like IE11 are full of quirky behavior, so these issues are almost certainly code compatibility bugs rather than user-specific IE settings (though we’ll cover how to guard against that too).

Why Your Modal Is Misbehaving in Win10 IE11 #

1. display:none Not Working #

IE11 has a history of ignoring display:none in specific scenarios:

• If the modal’s parent element triggers IE’s old "hasLayout" property (common with elements that have width, height, or float set without proper clearing).
• If you’re trying to toggle display:none before the DOM is fully loaded.
• Inline styles on the modal might be overriding your CSS rules (IE11 prioritizes inline styles more aggressively than modern browsers).

2. Modal Showing Up at the Bottom of the Page #

Since your modal is at the end of the ASP page, IE11’s wonky fixed positioning support is likely to blame:

• Without a proper <!DOCTYPE html> declaration, IE11 drops into "Quirks Mode" and treats position:fixed as position:relative, anchoring the modal to the end of the page instead of the viewport.
• If the modal is nested inside a container with transform, perspective, or filter styles, IE11 incorrectly makes the fixed-positioned modal relative to that container instead of the viewport.

Fixes to Try #

First: Lock in IE11’s Document Mode #

Add this meta tag as the first item in your <head> to force IE11 to use its latest rendering engine (prevents Quirks Mode and Compatibility View overrides):

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Also double-check your page starts with the standard HTML5 doctype:

<!DOCTYPE html>

Fix display:none Failure #

Replace or supplement your display:none approach with a fallback that works for IE11:

/* Base modal styles */
#unsupported-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Ensure modal sits above all other content */
    padding: 20px;
    background: white;
    border: 1px solid #ccc;
}

/* IE11-specific fallback for display:none */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #unsupported-modal.hidden {
        visibility: hidden;
        position: absolute;
        left: -9999px;
        top: auto;
    }
    #unsupported-modal.visible {
        visibility: visible;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

Then adjust your JavaScript to toggle the classes instead of directly setting display:

function isIE11() {
    return !!window.MSInputMethodContext && !!document.documentMode;
}

function showUnsupportedModal() {
    const modal = document.getElementById('unsupported-modal');
    if (isIE11()) {
        modal.classList.remove('hidden');
        modal.classList.add('visible');
    } else {
        modal.style.display = 'block';
    }
}

function hideUnsupportedModal() {
    const modal = document.getElementById('unsupported-modal');
    if (isIE11()) {
        modal.classList.remove('visible');
        modal.classList.add('hidden');
    } else {
        modal.style.display = 'none';
    }
}

Fix Modal Positioning #

• Move your modal directly inside the <body> tag (not nested in other containers) to avoid inheriting problematic parent styles.
• Ensure no parent elements of the modal have transform, perspective, or filter properties—these break fixed positioning in IE11.

Final Checks #

• Test your page in IE11’s Developer Tools (F12) to verify the document mode is set to "IE11" (not "IE8" or "Compatibility View").
• Clear IE11’s cache and history, as old cached styles can sometimes cause unexpected behavior.

These changes should resolve both the display:none failure and the misplaced modal in Win10 IE11. Legacy browser compatibility is never fun, but these targeted fixes usually do the trick!

内容的提问来源于stack exchange，提问作者Ana