HTML全局属性在不同内核浏览器中的表现-html教程-PHP中文网

doctype缺失或前置字符会导致浏览器进入怪异模式，使contenteditable、draggable等全局属性被html解析器直接忽略，document.queryselector('[draggable]')返回null；必须顶格书写且无bom，devtools中确认渲染模式为standards。

html全局属性在不同内核浏览器中的表现

DOCTYPE缺失直接导致全局属性失效

很多看似“没用上”的全局属性，比如contenteditable、draggable、spellcheck，在IE/Edge Legacy或旧版Safari里根本不会被识别——不是JS没绑定，是HTML解析阶段就被跳过了。根源就是没顶格写，前面多了空格、BOM或注释，<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>立刻进怪异模式（Quirks Mode）。此时DOM树结构都变了，<code>document.querySelector('[draggable]')可能返回null，哪怕HTML里明明写了draggable="true"。

验证方式：Chrome DevTools → Elements 面板顶部看渲染模式，必须显示Standards；若显示Quirks，立刻检查源码第一行。VS Code右下角确认编码为UTF-8 without BOM，别选UTF-8 with BOM。

data-*属性在旧WebView中被静默忽略

安卓4.4–5.1的系统WebView、iOS 9以下Safari对data-前缀属性支持极弱：它们能解析出DOM节点，但element.dataset.xxx始终是undefined，getAttribute('data-xxx')也常返回null。这不是缓存问题，是内核根本不把data-当合法属性存。

必须降级使用getAttribute('data-xxx')，且每次调用前加存在性判断：if (el.hasAttribute('data-xxx')) { ... }
避免依赖dataset对象做条件分支，它在旧环境里是空壳
如果需批量读取，改用正则提取el.outerHTML.match(/data-(\w+)="([^"]*)"/g)（仅限简单场景）

global attributes在IE11中的事件绑定陷阱

tabindex、hidden、aria-*这些属性在IE11里行为割裂：比如tabindex="-1"能让元素可聚焦但不进Tab顺序，这没问题；但hidden="true"在IE11中**不触发CSS的[hidden] { display: none; }规则**，必须手动补CSS：[hidden] { display: none !important; }。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

更隐蔽的是aria-expanded这类属性：IE11能读取值，但配合aria-controls做焦点联动时，click事件可能不冒泡到目标元素——尤其当父容器有transform或overflow: hidden时。解决方法只有两个：

显式给目标元素加tabindex="0"，确保键盘可访问路径完整
JS中不用el.getAttribute('aria-expanded') === 'true'做逻辑分支，改用el.hasAttribute('aria-expanded') && el.getAttribute('aria-expanded') !== 'false'

class和id属性在旧内核中的大小写敏感差异

现代浏览器对class和id值全小写处理，但Trident（IE）和早期Gecko（Firefox 2）对大小写敏感：写class="Btn primary"，用document.querySelector('.btn')在IE6–8里查不到；id="MySection"配document.getElementById('mysection')直接返回null。

这不是“建议统一小写”，而是硬性要求：