1

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

4

3 回答 3

6

不使用<marquee>

根据维基百科

marquee 标签是一种非标准的 HTML 元素，它可以使文本自动向上、向下、向左或向右滚动。该标签最初是在 Microsoft 的 Internet Explorer 的早期版本中引入的，并且与 Netscape 的 blink 元素进行了比较，作为 HTML 标准的专有非标准扩展，存在可用性问题。W3C 已弃用它，并且他们不建议在任何 HTML 文档中使用它。

如果您仍然希望选框按预期工作，请参阅此 http://remysharp.com/demo/marquee.html

于 2012-07-21T11:41:04.533 回答
2

正如您的标签所说，仅使用 CSS，解决方案是使用关键帧动画。但是，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点列出的另一个选项。

于 2012-07-21T13:59:53.107 回答
0

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

例如，选取框在<ul>元素内部，但在任何<li>元素之外。我相信浏览器会遇到这个问题！因此，在继续之前，
请确保该站点在http://validator.w3.org/上进行了验证。

于 2012-07-21T14:12:18.087 回答