Question

我在使用marquee标签时面临问题，当在chrome浏览器中打开时看起来很完美但是当我们在firefox中打开时，会有完全黑色的显示。

Answer 1

请勿使用<marquee>

marquee标记是一个非标准的HTML元素，它会导致文本自动向上，向下，向左或向右滚动。标签是第一个在早期版本的微软Internet Explorer中引入，并且是与Netscape的blink元素相比，作为专有的非标准元素具有可用性问题的HTML标准的扩展。它是 W3C弃用，并且不建议他们在任何HTML中使用文档。

如果你仍然希望marquee按预期工作，请看这个 http://remysharp.com/demo/marquee.html

Answer 2

正如您的代码所说，只使用CSS，解决方案就是使用keyframe animations。但是，IE9或更早版本不支持关键帧动画（IE10支持它们，所有当前版本的Chrome，Firefox，Safari和Opera都支持它们。）

使用关键帧动画的示例：http://dabblet.com/gist/3155878

HTML

<div class="carousel-wrapper">
    <ul class="logo-list">
        <li><a href="#"><img src="logo-img1.jpg"></a>
        </li><li><a href="#"><img src="logo-img2.jpg"></a>
        </li><!--many more list items just like this-->
        </ul>
</div>

基本CSS

.carousel-wrapper {
    width: 32em;
    height: 9em;
    margin: 10em auto;
    padding: 0;
    border: solid 1px #ccc;
    overflow: hidden;
}
.logo-list {
    margin: 0 0 0 16em;
    padding: .5em 0;
    white-space: nowrap;
    animation: scrollme 35s infinite linear alternate;
}
.logo-list li {
    padding: .25em;
    display: inline-block;
}
.logo-list a {
    width: 10em;
    height: 7.5em;
    border: solid 1px #ccc;
    display: block;
}
@keyframes scrollme {
    to {margin-left: -173em;}
    /* 173em = 18 list items * 10.5em - 16em
    (10.5em = 10em width + 2*.25em paddings left and right)
    (16em = half the width of the wrapper) */
}

IE9及更早版本的解决方案：

1。使用JavaScript。使用jQuery，它就像：

一样简单

$('.logo-list').animate({ marginLeft: '-173em'}, 35000, 'linear');

在这里演示http://jsfiddle.net/thebabydino/gTRXQ/1/

然而，如果禁用JavaScript，用户将只能看到第一个图像（除非他选择并拖动...大多数用户没有）。

2。只是CSS。好吧，无法实现完全相同的效果（自动滚动），但有一些选项。

首先，在.lt-ie9元素上添加.ie9和<html>类：

<!--[if lt IE 9]><html class="lt-ie9"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->

这样你就可以做些不同的事了。

a）第一个选项：丑陋的选项。没有自动滚动，只需在包装器上留下水平滚动条（当然也可以增加其高度），这样用户就可以看到所有图像。

.ie9 .carousel-wrapper, .lt-ie9 .carousel-wrapper {
    height: 10em;
    overflow-x: scroll;
}

b）第二个选项：仅在没有那么多图像时才有效。将它们叠加起来并在hover上显示它们 - 就像我在这个图库中所做的那样：http://jsfiddle.net/thebabydino/F7MKy/6/

c）只能在IE9中使用的选项，但您可以使用选项a）或b）作为旧版本的后备。添加某种导航，例如http://dabblet.com/gist/3156683（在IE9中查看）。

d）丑陋的选项＃2。仅针对IE9及更早版本（使用条件注释）返回选框。

我会做什么：

首先，将一个班级.no-js添加到<html>

如果未禁用JavaScript，请使用Modernizr将其删除。在这种情况下，请使用自动滚动的JavaScript版本。

如果禁用了JavaScript，但支持动画，请使用关键帧动画。在这种情况下，.no-js类未被删除，因此：

.no-js .logo-list { animation: scrollme 35s infinite linear alternate; }

如果既不支持JavaScript也不支持动画，请尝试我在 2 点列出的另一个选项。

Answer 3

您应该更正网站中的结构错误。

例如，选取框位于<ul>元素内，但在任何<li>元素之外。我确定浏览器会遇到问题！
因此，在继续之前，请确保该网站在http://validator.w3.org/上有效。

使用选框标记滚动

3 个答案: