ブラウザでのdragLeaveイベントの奇妙な動作

Question

私は 'dragstart'、 'dragleave'イベントを使用してブラウザでイベントを操作していました。 Internet Explorer 11ではwidthプロパティを追加するだけで動作が大きく異なります。要素にwidthプロパティが指定されるとすぐに、dragLeaveイベントが発生し始め、イベントが発生しません。なぜ誰かが、ちょうど幅プロパティのために2つの異なる振る舞いが観察される理由を説明することができますか？この問題は、IE11で特定的に確認されています。

ここには、CSSでのみ異なる2つのjsFiddlesがあります。https://jsfiddle.net/fb5sp5yc/1https://jsfiddle.net/f3ap2242/3他のブラウザ（Chrome、Firefox）では、すべてが期待通りに起動します。

HTMLボディ：

<div id="d" draggable="true">MoveInMoveOut</div><br> 
<div id="s" draggable="true">DragMe</div> 
<select id=oResults size=30> 
    <option>List of Events Fired 
</select> 

JSコード：

function ShowResults() { 
    var oNewOption = new Option(); 
    oNewOption.text = event.type + " fired by " + event.srcElement.id; 
    oResults.add(oNewOption,0); 
} 

var myDiv = document.getElementById("d"); 
myDiv.addEventListener('dragenter', ShowResults, false); 
myDiv.addEventListener('dragleave', ShowResults, false); 

CSS：Chromeの場合

#s { 
    background-color: red; 
    width: 200px; /*Only this property changes*/ 
} 

#d { 
    background-color: yellow; 
    width: 200px; /*Only this property changes*/ 
} 

Answer 1

、Sの幅dは、その要素の幅以上であればデフォルトのオーバーフロープロパティがありますが、IEではデフォルトでは発生しません。私はそれが私のためにうまく働いた

#oResults{ overflow:visible; }

を与えてみました、IEでこれとテストを含めてみてください。