1

マーキータグを使用して問題に直面しています.chromeブラウザで開くと完全に見えますが、firefoxで開くと完全に黒いショーが表示されます.

4

3 に答える 3

6

使用禁止<marquee>

ウィキペディアによると

マーキー タグは、テキストを自動的に上下左右にスクロールさせる非標準の HTML 要素です。このタグは、Microsoft の Internet Explorer の初期のバージョンで最初に導入され、使いやすさの問題を伴う HTML 標準に対する独自の非標準拡張機能として、Netscape の Blink 要素と比較されました。これは 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) 2 番目のオプション: 画像がそれほど多くない場合にのみ機能します。それらを積み重ねて公開します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 に答える