Compatibility of the value attribute of the li tag in HTML

The value attribute of the li tag in HTML has compatibility problems in various browsers. W3C does not recommend using the value and type attributes of li.

Problem Description:

Accidentally found that there is a problem when assigning value to the value attribute of li in the IE11 browser:

< ul > 
    < li value = '0098' > The leading 0 of the integer is automatically erased </ li > 
    < li value = '2147483648' > The value greater than the maximum value defaults to the maximum value (IE11) </ li > 
</ ul >

The above code assigns '0098' (a number string starting with 0) and '2147483648' (a number string that exceeds the maximum range of int) to the value attribute of li respectively.

But then the values ​​taken out are '98', '2147483647'

The reason is that some browsers, including IE, internally process the value attribute of the li tag: the value attribute of the li tag is automatically converted to an int value type, and the default value is 0;

test type	IE9、IE10、IE11	FireFox	Google
positive integer	Normal (more than 2147483647 shows 2147483647)	Normal (greater than 2147483647 shows 0)	Normal (greater than 2147483647 shows 0)
negative number	Convert to 0 (using JS dynamic assignment will report an error)	Normal (less than -2147483647 shows 0)	Normal (less than -2147483648 shows 0)
floating point number	Intercept the integer part (when JS dynamically assigns a non-zero value before, an error will be reported for a floating-point number less than 1)	truncate the integer part	truncate the integer part
letter	Convert to 1 (JS dynamic assignment will report an error)	Convert to 0	Convert to 0
letters + numbers	Convert to 1 (JS dynamic assignment will report an error)	Convert to 0 (if it starts with a number, it will be truncated to the largest integer number)	Convert to 0 (if it starts with a number, it will be truncated to the largest integer number)
Chinese	Convert to 1 (JS dynamic assignment will report an error)	Convert to 0	Convert to 0

 

Note: This test is only valid for the li tag in HTML, and the others are not tested for the time being. 

But the strange point is: the above rules will not apply to the li elements dynamically generated by JS, so I will not test them one by one here.

Therefore, when you want to apply the value attribute of the li tag, you should pay special attention. It is recommended not to use the value attribute. You can use other custom properties instead or consider applying $.data assignments if jQuery is used.

PS: It is only the value attribute of li, and the above problem will not occur if the two are replaced. So either change the label, or change the attribute.