CSS MS Edge 上的选取框

Question

我发现 this awesome CSS-Marquee 它几乎适用于所有浏览器，但不幸的是不适用于 MS Edge。当你将鼠标悬停在 Marquee 上时应该停止，但 Edge 不喜欢

.marquee span:hover
{
    animation-play-state: paused;
}

更糟糕的是，因为 Edge 无法标记 Marquee 中的文本，而且 Marquee 中的所有链接都被破坏了。

完整代码如下：

<div class="marquee">
  <span>Some long text with a few <a href="#">Links</a> and bla bla</span>
</div>

/* define the animation */
@keyframes marquee
{
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* define your limiting container */
.marquee
{
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

/* this is the tray moving around your container */
.marquee span
{
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 60s linear infinite; /* here you select the animation */
}

/* pause the animation on mouse over */
.marquee span:hover
{
    animation-play-state: paused;
}

有什么解决方案吗？也许 Edge 有一个单独的 CSS？是否可以使不同文本长度的动画速度相同？

编辑：好的！所以我找到了一种方法来使不同文本长度的速度相同：

<script>
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelector('.marquee span');
var spanLength = spanSelector.offsetWidth;
var timeTaken = spanLength / speed;
spanSelector.style.animationDuration = timeTaken + "s";
}
calcSpeed(100);
</script>

但问题仍然存在，Edge 不喜欢 "animation-play-state: paused;" 并且会破坏 Marquee 中的所有链接

Answer 1

好的！这是我的解决方案！它现在具有不同文本长度的相同速度，如果使用 Edge，我会覆盖 css。现在，如果您将鼠标悬停在 Marquee 上并且在 Edge 中，Marquee 几乎会在每个浏览器处停止，动画播放状态：暂停；更改为动画播放状态：运行;

这是相同速度的代码：

<script>
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelector('.marquee span');
var spanLength = spanSelector.offsetWidth;
var timeTaken = spanLength / speed;
spanSelector.style.animationDuration = timeTaken + "s";
}
calcSpeed(100);
</script>

这是 Edge 的代码：

@supports (-ms-ime-align:auto) {
  .marquee span:hover { animation-play-state: running; } 
}

如果您有更好的解决方案来解决动画随 Edge 停止的问题，请 post 它！！！

CSS MS Edge 上的选取框

CSS Marquee on MS Edge

html

css

marquee

microsoft-edge