Странное поведение события dragLeave в браузерах

Question

Я работал с перетаскиванием событий в браузерах, используя события «dragstart», «dragleave». В Internet Explorer 11 поведение отличается от обычного, когда добавляется свойство ширины. Как только свойство ширины указано для элементов, событие dragLeave начинает стрельбу, и без него это не так. Может кто-нибудь объяснить, почему именно два разных поведения наблюдаются только из-за свойства ширины. Эта проблема наблюдается в IE11.

Вот два jsFiddles, которые отличаются только их CSS: 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); 

УС:

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

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

Answer 1

В Chrome, если ширина х и г больше, чем ширина элемента затем будет существовать свойство переполнения по умолчанию, но по умолчанию это произойдет не по умолчанию. Я попытался дать

#oResults{ overflow:visible; }

Он работал хорошо для меня, пожалуйста, попробуйте в том числе это и тест в IE.