値属性タイプ自動タイプ変換

Question

Microsoftエッジ（14）とIE（11）で奇妙な動作が発生しました。 私はjQueryのを使用して動的な要素を作成しました：

var option1 = $('<li class="btn my-dropdown-item">Option 1</li>'); 
option1.attr('value', '00:05:00'); 
option1.attr('value-test', '00:05:00'); 
var theValue1 = option1.attr('value'); 
var testValue1 = option1.attr('value-test'); 

var option2 = $('<li class="btn my-dropdown-item">Option 2</li>'); 
option2.attr('value', '01:00:00'); 
option2.attr('value-test', '01:00:00'); 
var theValue2 = option2.attr('value'); 
var testValue2 = option2.attr('value-test'); 

は今、期待される結果は、（彼らは例えば、クロムに表示される）です：エッジで

theValue1 === "00:05:00" 
testValue1 === "00:05:00" 
theValue2 === "01:00:00" 
testValue2 === "01:00:00" 

結果（14）：

theValue1 === 0 
testValue1 === "00:05:00" 
theValue2 === 1 
testValue2 === "01:00:00" 

IE（11）で

結果：

theValue1 === "00:05:00" 
testValue1 === "00:05:00" 
theValue2 === 1 
testValue2 === "01:00:00" 

私はある種の型変換を推測していますが、ここで何が起きているのか、なぜそれほど理解できていませんか？ IE/EDGEのバグはありますか？何か不足していますか？それは順序付けられたリストの内側だし、その値は数だけ（整数）できる場合

Answer 1

リスト項目が値を持つことができる唯一の時間です。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

この整数属性は、要素によって定義されたリスト アイテムの現在の順序値を示します。この 属性にのみ許可された値は、それ以外の場合のみ、フォームの入力が値を持っている数

<ol> 
    <li value="0">first</li> 
    <li value="1">second</li> 
<ol> 

です。リスト項目はどこにも挿入されず、順序付きリストには含まれていませんが、IEと思われます。また、Edgeはリスト項目の値をリスト項目の値として扱います。

value-testも有効な属性名ではありません。

ブラウザが無効なマークアップを処理する方法は異なります。無効なマークアップを使用して他のブラウザと同じことをしないと、実際にはバグではありません。

解決策ではなく、有効なdata-*属性を使用し、非常に簡単です、それはすべてのブラウザ

var option1 = $('<li class="btn my-dropdown-item">Option 1</li>'); 
 
option1.attr('data-value1', '00:05:00'); 
 
option1.attr('data-value2', '00:05:00'); 
 
var theValue1 = option1.data('value1'); 
 
var testValue1 = option1.data('value2'); 
 

 
var option2 = $('<li class="btn my-dropdown-item">Option 2</li>'); 
 
option2.attr('data-value1', '01:00:00'); 
 
option2.attr('data-value2', '01:00:00'); 
 
var theValue2 = option2.data('value1'); 
 
var testValue2 = option2.data('value2'); 
 

 
console.log(theValue1); 
 
console.log(theValue2); 
 
console.log(testValue1); 
 
console.log(testValue2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>