分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

HTML中 li 标签的value属性兼容问题

发布时间:2023-09-06 01:51责任编辑:彭小芳关键词:HTML

HTML中的 li 标签的value属性在各个浏览器是存在兼容问题的,W3C是不建议使用 li 的value、type属性的。

问题描述:

无意间发现,在IE11浏览器中给 li 的value属性赋值时会出现问题:

<ul> ???<li value=‘0098‘>整数开头0被自动抹除</li> ???<li value=‘2147483648‘>大于最大值的数值默认为最大值(IE11)</li></ul>

以上代码分别给 li 的value属性赋值‘0098’(以0开头的数字字符串)以及‘2147483648’(超出int最大范围的数字字符串)

但之后取出来的值就分别为‘98’、‘2147483647’

原因是包括IE在内的部分浏览器对 li 标签的value属性进行了内部处理:li 标签的value属性会自动转换为int数值类型,默认值为0;

测试类型

IE9、IE10、IE11

FireFox

Google

正整数

正常(大于2147483647显示2147483647)

正常(大于2147483647显示0)

正常(大于2147483647显示0)

负数

转成0(用JS动态赋值会报错)

正常(小于-2147483647显示0)

正常(小于-2147483648显示0)

浮点数

截取整数部分(JS动态赋值时,若之前已有非0值,则小于1的浮点数会报错)

截取整数部分

截取整数部分

字母

转成1(JS动态赋值会报错)

转成0

转成0

字母+数字

转成1(JS动态赋值会报错)

转成0(若是数字开头则截取到最大整数数字)

转成0(若是数字开头则截取到最大整数数字)

中文

转成1(JS动态赋值会报错)

转成0

转成0

注:此测试只针对HTML中的 li 标签有效,其他的暂时没有测试。 

但是奇怪的一点是:在用JS动态生成的 li 元素上以上这些规律又会不适用,在此就不再一一测试了。

所以当要适用 li 标签的value属性时,要格外注意,建议不要使用value属性。可以改用其他自定义属性或者适用jQuery情况下可以考虑适用$.data赋值。

PS:仅仅是 li 的value属性,两者换其一都不会出现上面的问题。所以要么换标签,要么换属性。

HTML中 li 标签的value属性兼容问题

原文地址:https://www.cnblogs.com/Aoobruce/p/8962390.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved