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

Question

I want to insert an image into marquee tag.

I have written following code:

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

Its working fine in firefox and IE but not working in chrome. What is the problem.? Please reply as early as possible. Thanks in advance.

Answer 1

Because the marquee tag is a crime against nature. And it's no longer supported in newer versions of Chrome.

Answer 2

The marquee is not supported in modern html. Chrome dropped support for it a while ago. You need to implement this via CSS3 or Javascript.

Further W3C states that it is non standard and should not be used.

The effect can be easily acheived via jQuery or via CSS3

Answer 3

The marquee element has varying implementations, partly because there has been no published specification for it. In HTML5, the element is being defined exactly, and HTML5 drafts require support to marquee as defined there . (The drafts also declare it “obsolete” and “nonconforming”, but these are just what they say to authors ; the requirements on implementations are different.) However, there are still limitations and differences in support, see eg MDN on marquee .

In this case, it does not seem to be the image but the attribute behavior="alternate" that causes the problem. If you remove it, the image will move on Chrome, too.

This is apparently implementation bug rather than lack of support. Inspecting the DOM in Chrome shows that the behavior property has the value alternate as specified, but it just does not work. If you add a border to the marquee element in CSS, the image starts moving, alternatingly, but just a few pixels right and left.

If you really alternating direction, it is probably best to use some other technique instead of marquee . For example, a simple moving image can be implemented using JavaScript so that the position is changed in a loop, using a timer, and then you can easily implement alternating direction, too. Alternatively, possibly simpler but not as robustly (due to limited browser support), you can use CSS3 animations.

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); }
}

Here is the fiddle:

http://jsfiddle.net/qCahH

Replace the text with the image.

Answer 5

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

Answer 6

Who said it doesn't ?
On Chromium 83.0.4103.61 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit) it works flawlessly.

Didn't test on Chrome, though.