怎样用CSS Hack区分并兼容360安全浏览器的高速模式与兼容模式？-css教程-PHP中文网

纯 CSS Hack 对360双核无效，因其8.1+版已移除旧式Hack识别逻辑；高速模式近Chrome，兼容模式模拟IE8/10，但共享HTML上下文且无CSS隔离机制，须用JS结合userAgent与document.documentMode判断并打class标记。

怎样用css hack区分并兼容360安全浏览器的高速模式与兼容模式？

360安全浏览器的高速模式（Webkit/Blink）和兼容模式（Trident）无法用单一CSS Hack可靠区分，必须结合内核探测 + 条件注释或 JS 判断，纯 CSS 属性/选择器 Hack 在新版（8.1+）中基本失效。

为什么纯 CSS Hack 对 360 浏览器双核无效

360 浏览器从 8.1 版本起已移除对多数旧式 CSS Hack 的识别逻辑，包括 \9、\0、*html、*+html 等。它不再像 IE6–IE10 那样暴露稳定可预测的解析漏洞。高速模式下渲染行为接近 Chrome，兼容模式下模拟 IE8/IE10（取决于页面设置），但两者共享同一 HTML 文档上下文，CSS 规则无天然隔离机制。

常见误判现象：

用 @media screen and (-webkit-min-device-pixel-ratio:0) 同时命中高速模式和部分旧版 Opera/Safari，无法排除兼容模式（因 Trident 内核不执行该媒体查询，但页面若被强制进兼容模式，该规则根本不会生效——你看到“没生效”，反而误以为是兼容模式）
用 screen and (min-width:0)\0 或 all and (-ms-high-contrast:none) 等 IE10+ Hack，在 360 兼容模式中表现不稳定，且高速模式下也可能意外触发
依赖 document.documentMode 的 JS 判断在高速模式下返回 undefined，但在兼容模式中可能返回 8 或 10 —— 这个值本身不可靠，因为 360 兼容模式实际使用的是封装后的 Trident，documentMode 可能被伪造或未同步

真正可行的区分方式：用 JS 检测 userAgent + document.documentMode 组合

必须放弃“纯 CSS”幻想，改用轻量 JS 在页面加载早期做内核判定，并打上 class 标记，再用常规 CSS 编写样式。这是目前唯一稳定方案。

实操建议：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

在中尽早插入脚本（避免 FOUC），例如：

if (navigator.userAgent.indexOf('360SE') > -1 || navigator.userAgent.indexOf('QIHU') > -1) {
  if (document.documentMode === 8 || document.documentMode === 10) {
    document.documentElement.className += ' browser-360-compat';
  } else {
    document.documentElement.className += ' browser-360-speed';
  }
}

注意：不能只靠 navigator.userAgent 匹配 360SE 或 QIHU，因为高速模式和兼容模式 UA 字符串几乎一致；关键判断依据是 document.documentMode 是否存在且为数值（兼容模式有，高速模式无）
避免使用 $.browser（jQuery 已废弃）、isIE 等通用检测库，它们通常不识别 360 的双核特殊性

配套 CSS 写法：按 class 分离样式，不依赖 Hack

有了 browser-360-compat 和 browser-360-speed 类后，CSS 就回归清晰语义：

.my-button { padding: 8px 12px; }
.browser-360-compat .my-button { padding: 6px 10px; zoom: 1; } /* 触发 hasLayout 修复 Trident 布局 bug */
.browser-360-speed .my-button { padding: 9px 14px; } /* 适配 Webkit/Blink 下 box-sizing 行为差异 */

要点：

不要把 browser-360-compat 当作 “IE8” 用——它只是 Trident 渲染通道，但 JS 执行环境、CSSOM 支持度、事件模型都可能与原生 IE8 不同
兼容模式下仍需配合，否则 document.documentMode 可能返回 11 或 Edge，导致误判
高速模式下，input::-webkit-clear-button 和 input::-ms-clear 都可能生效，需同时重置：input::-webkit-clear-button, input::-ms-clear { display: none; }

最易被忽略的一点：360 浏览器会根据域名自动切换内核，即使你 JS 判定为高速模式，用户手动点击地址栏内核图标切到兼容模式后，页面不会自动重载或重新执行 JS —— 必须监听 window.onbeforeunload 或轮询 document.documentMode 变化（极少见，但内网系统真会发生）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！