why marquee tag not working in google chrome.?

前端 未结 6 1630
心在旅途
心在旅途 2020-12-11 04:18

I want to insert an image into marquee tag.

I have written following code:



        
                      
相关标签:
6条回答
  • 2020-12-11 04:54

    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

    0 讨论(0)
  • 2020-12-11 04:56

    Marquee has been deprecated so will show unspecified behaviour on different browsers.

    0 讨论(0)
  • 2020-12-11 04:57

    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.

    0 讨论(0)
  • 2020-12-11 05:00

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

    0 讨论(0)
  • 2020-12-11 05:05

    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.

    0 讨论(0)
  • 2020-12-11 05:12

    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 e.g. 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.

    0 讨论(0)
提交回复
热议问题