0

私のページには、次のCSSルールを持つ要素があります。

.pointer {
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    top: 70%;
    z-index: 1;
    width: 3%;
    height: 6%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    left: 0;
    background-image: url("img/myImage.jpg");
}

私がテストしたブラウザでうまく動作しますが、Operaだけがそれを好きではありません。スクロールすると、背景画像も「スクロール」されるため、コンテナから出るときにそのまま消えます。
それは既知の問題だと思いますが、それでも解決策を見つけることができませんでした。

このページでは、OperaからCSSルールを非表示にする方法について説明していますが、この投稿がanno 2002であるという事実に加えて、実際にはCSSハックを使用したくありません。

削除overflow: hiddenしても修正されません。追加background-attachment: fixedしても役に立ちませんでした。他のアイデアや解決策はありますか？

編集：http：
//jsfiddle.net/mvV7G/

4

1 に答える 1

2

私はあなたのフィドルプロジェクトを見てきました。この問題は、背景画像と境界線の半径が同じ要素に適用されていることが原因であると考えています。これがオペラでのみ発生する理由を正直に説明することはできません。

ただし、簡単な解決策は、アンカーをdivでラップし、スタイルをそれぞれに分割して、背景画像と半径が別々の要素にあることを確認することです。

私は可能な解決策でフィドルを作成しました、それはいくつかの片付けが必要ですが、それはあなたを軌道に乗せると思います-http://jsfiddle.net/zyj6Z

CSSは以下のとおりです。

.link {
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d000000, endColorstr=#4d000000)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d000000, endColorstr=#4d000000);
zoom: 1;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBvbHlnb24gZmlsbD0iI2ZmZiIgcG9pbnRzPSIyLjc2OSw3Ljk5MiAxMC43NjIsMCAxMy4xMzIsMi4zNjIgNy42MDQsNy44OTkgMTMuMjMxLDEzLjUyOCAxMC43NjIsMTYgMi43NjksOC4wMDcgMi43NzYsOCIvPjwvc3ZnPg==");
background-position: center;
background-repeat: no-repeat;
width: 10%;
height: 10%;
position: fixed;
top: 70%;
left: 0;
}
.test {
width: 10%;
height: 10%;
position: fixed;
top: 70%;
left: 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
overflow: hidden;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
background-color: #000000;
background-color: transparent\9;
background-color: rgba(0, 0, 0, 0.3);
text-indent: 100%;
white-space: nowrap;
}

とHTMLはこちら：

<div class="outer">
<div class="wrap">
     <h1>Stuff</h1>

    <div class="test"> 
        <a href="#" class="link">Hide me!</a>
    </div>
    <ul>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
    </ul>
</div>

これがお役に立てば幸いです。

于 2013-02-10T16:14:17.407 に答える