Question

我想在marquee标签中插入图片。

我写了以下代码：

<marquee scrollamount="4" behavior="alternate" direction="right" width="300"><img width="180px" style="padding-left:30px;opacity:0.7" src="img/cloud3.png"></marquee>

它在firefox和IE中运行良好，但不能在chrome中工作。问题是什么。？请尽早回复。提前谢谢。

Answer 1

因为marquee标签是对自然的犯罪。并且在较新版本的Chrome中不再支持它。

Answer 2

现代html不支持marquee。 Chrome前一段时间不再支持它了。您需要通过CSS3或Javascript实现此目的。

此外，W3C声明它是non standard，不应使用。

可以通过jQuery或CSS3

轻松实现效果

Answer 3

marquee元素具有不同的实现，部分原因是它没有已发布的规范。在HTML5中，正在定义元素，HTML5草案需要支持marquee as defined there。（草稿还声明它“过时”和“不合格”，但这些只是他们对作者所说的;对实现的要求是不同的。）但是，有仍然存在限制和支持差异，例如MDN on marquee

在这种情况下，它似乎不是图像，而是导致问题的属性behavior="alternate"。如果您将其删除，图片也会在Chrome上移动。

这显然是实现 bug 而不是缺乏支持。在Chrome中检查DOM会显示behavior属性的值为alternate，但它不起作用。如果您在CSS中为marquee元素添加边框，则图像会开始交替移动，但只是左右几个像素。

如果你真的交替方向，最好使用其他技术而不是marquee。例如，可以使用JavaScript实现简单的运动图像，以便使用计时器在循环中更改位置，然后您也可以轻松地实现交替方向。或者，可能更简单但不那么健壮（由于浏览器支持有限），您可以使用CSS3动画。

Answer 4

HTML：

<div id="cloud">image</div>

CSS：

    #cloud{
        width:180px;
        padding-left:30px;
        opacity:0.7;
        animation:slide 10s infinite;
        -moz-animation:slide 10s infinite;//Firefox
        -webkit-animation:slide 10s infinite;//chrome and safari
        -o-animation: slide 10s infinite;//Opera   
}

@keyframes slide{
    0%   {-transform: translate(0px, 0px); }
        100% {-transform: translate(500px,0px); }
}    

@-moz-keyframes spin{
    0%   {-moz-transform: translate(0px, 0px); }
    100% {-moz-transform: translate(500px, 0px); }
}

@-webkit-keyframes slide{
         0%   {-webkit-transform: translate(0px, 0px); }
        100% {    -webkit-transform: translate(500px,0px); }
    }

@-o-keyframes slide{
    0%   {-o-transform: translate(0px, 0px); }
    100% {-o-transform: translate(500px, 0px); }
}

这是小提琴：

http://jsfiddle.net/qCahH

用图像替换文字。

Answer 5

Marquee已被弃用，因此会在不同的浏览器上显示未指定的行为。

Answer 6

谁说不呢？
在Chromium 83.0.4103.61（正式版本）上，基于Ubuntu构建，在Ubuntu 18.04（64位）上运行，可以完美运行。

虽然没有在Chrome上进行测试。

为什么marquee标签不能用于谷歌浏览器。？

6 个答案: