在Microsoft Edge中執行簡單變換時出現問題:scale()
。 我創建了一個simple test case,它應該通過縮放scaleX()
屬性來顯示懸停時的子菜單。這應該適用於任何瀏覽器。 只要我喜歡縮放的值爲1,它就會失敗,但如果它是1.0001或0.999999,則它會失敗。這也不符合scale()
和scale3d()
。變換比例(1)在Microsoft Edge中不起作用
* {
font: 18px/1.5 sans-serif;
}
li {
padding: 0.2em 1.4em
}
.root > li {
display: inline-block;
background: #adc;
}
li > ul {
position: absolute;
background: #cde;
transform: scaleY(0);
border: 1px solid green;
height: 200px
}
li.one:hover > ul {
transform: scaleY(1.0001) ;
}
li.two:hover > ul {
transform: scaleY(1.0) ;
}
li.three:hover > ul {
transform: none ;
}
.content {
background: #fed;
min-height: 700px;
}
<ul class='root'>
<li class='one'>hover me, it works
<ul>
<li>ding</li>
<li>dong</li>
</ul>
</li>
<li class='two'>me not, in IE Edge
<ul>
<li>ding</li>
<li>dong</li>
</ul>
</li>
<li class='three'>got it!
<ul>
<li><code>transform: none</code></li>
<li>does the trick!</li>
<li>so stupid!</li>
</ul>
</li>
</ul>
<div class="content">
<h1>Huhuuuh,</h1>
<p>Obviously IE Edge (current Version on a Surface Pro) has a problem with hiding and showing elements via a scale transforms to factor 1. As long as its not Integer(1) like 0.9999 or 1.0001, it works.
</p>
<p>Just try out here and change the values to get sure.</p>
<p>
My IE Version:
<br />
Microsoft Edge 25.10568.0.0
<br />
Microsoft EdgeHTML 13.10568.0.0
</p>
</div>
最好的辦法是微軟封邊,不封邊IE,順便說一句。 IE是完全不同的瀏覽器。 – TylerH
我在互操作性的基礎上提交了[針對Microsoft Edge的錯誤](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8347513/)。 – Sampson