为什么选取框标签在谷歌浏览器中不起作用。？答案

【问题标题】：why marquee tag not working in google chrome.?为什么选取框标签在谷歌浏览器中不起作用。？
【发布时间】：2020-06-06 02:20:43
【问题描述】：

我想在选取框标签中插入图像。

我写了以下代码：

<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 中无法运行。问题是什么。？请尽快回复。提前致谢。

【问题讨论】：

当你说这个功能“不起作用”时，你到底是什么意思？这有很多不同的含义。为了帮助其他用户理解您的问题，请尝试添加一些代码或jsFiddle 以提供帮助。
我只能看到图像，但不能滚动。
****用于jScroller** ** jScroller Link

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

他正在尝试制作一个图像滚动条，我认为这也是对自然的犯罪，但也许不是那么多，但它很常见。
我觉得这个答案相当乏味。 marquee 标签可能永远不会被创建，但使用 Web 组件，今天有人可以轻松创建新的 marquee 标签。关键是 html 是关于语义而不是表示的。 marquee 决定应该如何显示某物，而不是它是什么类型的信息。 marquee 标签的最终结果并不是这里的坏处。它是如何创建的，这很糟糕。 HTML 不应该是演示文稿的一部分，这就是 marquee 的问题所在。

【解决方案2】：

现代 html 不支持 marquee。 Chrome 不久前放弃了对它的支持。您需要通过 CSS3 或 Javascript 来实现。

进一步的 W3C 声明它是non standard，不应使用。

通过jQuery或CSS3可以轻松实现效果

【讨论】：

【解决方案3】：

marquee 元素有不同的实现，部分原因是它没有发布的规范。在 HTML5 中，元素被精确定义，HTML5 草案 require 支持marquee as defined there。（草案还声明它“过时”和“不合格”，但这只是他们对作者说的；对实现的要求是不同的。）然而，有仍然存在限制和支持差异，请参见例如MDN on marquee.

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

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

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

【讨论】：

【解决方案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

用图片替换文字。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

谁说没有？
在 Chromium 83.0.4103.61（官方构建）上构建在 Ubuntu 上，在 Ubuntu 18.04（64 位）上运行，它可以完美运行。

不过，没有在 Chrome 上进行测试。

【讨论】：