如何阻止IE5-11加载CSS，使页面以无样式状态展示？

完全理解你的困扰！旧版IE（尤其是IE10-11）废弃了传统条件注释，确实给兼容处理添了不少麻烦。直接忽略当然是一个选项，但如果你的网站还有一定比例的IE5-11用户，下面这两个靠谱的方法能帮你实现“无样式展示”的需求：

方法一：结合条件注释（IE5-9）+ JS检测（IE10-11），彻底不加载CSS #

这是最高效的方案，因为旧IE浏览器根本不会请求你的样式文件，避免了不必要的资源加载。

步骤1：给IE5-9设置条件注释 #

IE9及以下还支持HTML条件注释，我们可以把样式表放在仅非IE浏览器可见的代码块里：

<!--[if !IE]><!-->
<link rel="stylesheet" href="your-main-styles.css">
<!--<![endif]-->

这样IE5-9会直接跳过这段代码，不会加载样式表，自然展示无样式页面。

步骤2：用JS检测IE10-11，阻止样式加载 #

对于IE10-11，我们可以通过用户代理（UA）字符串检测，只在非IE浏览器中动态加载样式表：

<script>
// 检测是否为IE浏览器（包含IE5-11）
var isOldIE = /MSIE|Trident/.test(navigator.userAgent);
if (!isOldIE) {
    // 动态创建样式表链接并添加到页面
    var styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = 'your-main-styles.css';
    document.head.appendChild(styleLink);
}
</script>

把这段代码放在页面<head>的最前面，这样浏览器会先执行检测，只有非IE才会加载样式。

方法二：CSS Hack重置样式（适合不想改HTML结构的情况） #

如果不想动JS和HTML加载逻辑，也可以用IE专属的媒体查询hack，加载样式后再强制重置为默认样式：

/* 针对IE10-11的媒体查询hack */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* 强制重置所有元素样式为浏览器默认 */
    * {
        all: unset !important;
        display: revert !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        font-size: 16px !important;
        font-family: system-ui, serif !important;
        line-height: 1.5 !important;
    }
}

同时搭配步骤1的条件注释，让IE5-9不加载CSS，IE10-11加载后被重置为无样式状态。不过这个方案是“先加载再重置”，不如方法一高效，适合临时应急。

要不要忽略这个问题？ #

如果你的网站流量分析显示IE5-11的访问占比极低（比如不到0.5%），那直接忽略也完全没问题——毕竟这些旧浏览器的市场份额已经微乎其微了。但如果还有用户在使用，上面的方法都能完美解决你的痛点。

内容来源于stack exchange