为什么 IE 用斜杠切割 html 列表项属性？答案

【问题标题】：Why is IE cutting html list item attributes with slashes?为什么 IE 用斜杠切割 html 列表项属性？
【发布时间】：2014-07-09 21:05:55
【问题描述】：

这是一个奇怪的问题。我正在尝试将属性附加到包含斜杠的li 标签，并且只有 IE 在第一个斜杠处将它们切断。我发现有趣的是，我尝试检查其他元素的行为，例如 span 和 div 标签，IE 不会失去价值。

示例

<span value="10/10/10">plain span</span> // value = "10/10/10"

<ul>
    <li value="10/10/10">plain li</li>   // value = "10"
</ul>

检查IE中的元素看看

【问题讨论】：

【解决方案1】：

value 是li 元素上的一个特殊属性，仅当li 是ol 的子元素时才适用。在 span 和 div 这样的元素上，它是非标准的，但我不希望浏览器在这些元素上声明它时会做任何时髦的事情。

W3C HTML5 spec 有话要说：

如果父元素是ol 元素，则li 元素具有序号值。

value 属性（如果存在）必须是给出列表项序数值的有效整数。

如果存在value 属性，用户代理必须将其解析为整数，以确定该属性的值。如果属性的值不能转换为数字，则必须将该属性视为不存在。该属性没有默认值。

这就是为什么，如果您将ul 更改为ol，the list marker says "10"（对应于默认的十进制列表编号系统）。

但是，规范中还说：

value IDL 属性必须反映value 内容属性的值。

因此，当 IE 将属性值解析为整数时（与任何其他浏览器一样），它不应将标记中给出的原始属性值替换为从原始值解析的整数，因为它看起来正在做。其他浏览器正确保留原始值。请注意，该值仍然不符合规范，因为规范说它必须是一个有效的整数，"10/10/10" 不是。

如果您打算为 li 元素（或任何其他元素）指定任意数据，则应使用自定义数据属性以确保它不会与任何现有属性冲突：

<li data-value="10/10/10">

【讨论】：

【解决方案2】：

value 属性仅适用于有序列表，不适用于无序。

<ol>
    <li value="10/10/10">plain li</li>   
</ol>

【讨论】：