ie11作为仍有部分用户使用的旧版浏览器，在加载外部css时可能会遇到样式不生效的问题，这类问题大多和引入方式、语法兼容、浏览器配置相关，需要逐一排查解决。
常见原因及对应解决办法
1. 外部css路径错误
首先检查link标签的href路径是否正确，ie11对相对路径的解析规则和现代浏览器略有差异，建议使用绝对路径或者确保相对路径的层级正确。
错误的引入示例：
<!-- 路径层级错误，当前页面在二级目录，css在根目录的css文件夹下 --> <link rel="stylesheet" type="text/css" href="style.css">
正确的引入示例：
<!-- 使用绝对路径，避免相对路径解析问题 --> <link rel="stylesheet" type="text/css" href="/css/style.css"> <!-- 或者使用正确的相对路径 --> <link rel="stylesheet" type="text/css" href="../css/style.css">
2. css语法存在ie11不兼容的写法
ie11不支持部分css3新特性，如果外部css中包含flex布局的旧版写法、css变量、grid布局等不兼容语法，可能会导致整个样式表加载失败。
不兼容的语法示例：
/* ie11不支持css变量 */
:root {
--main-color: #ff0000;
}
.box {
color: var(--main-color);
}
/* ie11不支持grid布局 */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
兼容的写法示例：
/* 替换css变量为固定值 */
.box {
color: #ff0000;
}
/* 使用float或者旧版flex兼容ie11 */
.container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.container .item {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}
3. 浏览器缓存导致样式未更新
ie11的缓存机制较强，如果之前加载过同路径的css文件，即使文件内容更新，也可能继续使用缓存的旧文件，导致新样式不生效。
解决办法是在css引入路径后添加版本号参数，强制浏览器重新加载：
<link rel="stylesheet" type="text/css" href="/css/style.css?v=1.0">
每次更新css文件时修改版本号即可，比如改为?v=1.1。
4. 安全设置阻止外部资源加载
如果页面是在本地文件协议（file://）下打开，ie11的安全设置可能会阻止外部css的加载，此时可以调整浏览器的安全设置。
操作步骤：打开ie11的【工具】-【Internet选项】-【安全】选项卡，选择【本地Intranet】，点击【自定义级别】，找到【其他】分类下的【加载外部样式表】，设置为【启用】，保存后重启浏览器即可。
5. link标签属性缺失或错误
ie11对link标签的属性要求更严格，必须包含rel和type属性，否则可能无法识别样式表。
错误的标签示例：
<link href="/css/style.css">
正确的标签示例：
<link rel="stylesheet" type="text/css" href="/css/style.css">
排查流程总结
可以按照以下步骤快速定位问题：
- 先检查link标签的路径和属性是否正确
- 注释掉css中的新特性语法，逐步排查兼容问题
- 添加版本号参数清除缓存测试
- 调整浏览器安全设置测试本地文件加载情况
按照以上方法基本可以解决ie11下无法引入外部css的问题，保障页面样式正常显示。