10

わかりました、このFC バルセロナの CSS ロゴを作成しました。すべて正常に動作します。

  • Firefox 13
  • クローム 20
  • サファリ5
  • IE9

しかし、Opera 11 (および 12 も) では、これらの blaugrana ストライプは切り取られません。追加のラッパーの有無にかかわらず、多くの構成を試しましたが、うまくいきませんでした。

HTML: 

<div id="blaugrana_stripes_container" class="abs border_black fill_purple cropper layer9 rounded">
    <!-- Wrapper needed for some browsers to crop overflow properly -->
    <div id="blaugrana_stripes_overflow_cropper" class="rounded">
        <div class="blaugrana_stripes fill_purple border_blue"></div>
        <div class="blaugrana_stripes fill_purple border_blue"></div>
    </div>
</div>

関連CSS: 

#blaugrana_stripes_container, #blaugrana_stripes_overflow_cropper {
    width: 244px;
    height: 244px;
    text-align: left;
    -moz-border-radius: 155px 155px 134px 134px;
    -webkit-border-radius: 155px 155px 134px 134px;
    border-radius: 155px 155px 134px 134px;
}
#blaugrana_stripes_container {
    left: 36px;
    top: 62px;
    border-width: 2px;
    -ms-transform: scaleY(0.79);
    -moz-transform: scaleY(0.79);
    -webkit-transform: scaleY(0.79);
    -o-transform: scaleY(0.79);
    transform: scaleY(0.79);
    z-index: 3;
}
#blaugrana_stripes_overflow_cropper {
    overflow: hidden;
    white-space: nowrap;
}
.blaugrana_stripes {
    height: 100%;
    width: 35px;
    border-width: 0px 35px 0px 35px;
    margin-right: 35px;
    display: inline-block;
}
.cropper {
    overflow: hidden;
    font-size: 0;
    margin: 0px;
    padding: 0px;
    border: none;
}
.abs {
    position: absolute;
}

コードが多いのでここにコピーしましたので、参考になるかもしれません。border_black fill_purple上記では、装飾 ( )、z-indexing ( layer9)、javascript メカニズム ( ) に使用されるクラスをスキップしましたrounded。これらは問題とは関係がないと思うからです。

もちろん、デモ サイトの Firebug またはその他の開発者ツールを使用して、すべてを表示できます。

助言がありますか？

4

3 に答える 3

3

これがOperaでバグがある理由はわかりませんが、gradientを使用できます（以下のコードを参照）。IEでは機能しません（バージョン9でテスト済み）。

.blaugrana_stripes{display:none;}
#blaugrana_stripes_overflow_cropper{

background: #0b2f89;
background: -moz-linear-gradient(left,  #0b2f89 0%, #0b2f89 14%, #980f39 14%, #980f39 28%, #0b2f89 28%, #0b2f89 42%, #980f39 42%, #980f39 57%, #0b2f89 57%, #0b2f89 71%, #980f39 71%, #980f39 86%, #0b2f89 86%, #0b2f89 99%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0b2f89), color-stop(14%,#0b2f89), color-stop(14%,#980f39), color-stop(28%,#980f39), color-stop(28%,#0b2f89), color-stop(42%,#0b2f89), color-stop(42%,#980f39), color-stop(57%,#980f39), color-stop(57%,#0b2f89), color-stop(71%,#0b2f89), color-stop(71%,#980f39), color-stop(86%,#980f39), color-stop(86%,#0b2f89), color-stop(99%,#0b2f89));
background: -webkit-linear-gradient(left,  #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%);
background: -o-linear-gradient(left,  #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%);
background: -ms-linear-gradient(left,  #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%);
background: linear-gradient(to right,  #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%);

}
于 2012-07-10T18:21:48.103 に答える
3

グラデーションを使用するさらにクリーンな方法があります。

#blaugrana_stripes_container {
    background-image: -o-linear-gradient(0deg, #0B2E89 50%, #980F39 50%, #980F39);
    background-size: 70px 50px;
}

内のものは何でも取り除くことができます#blaugrana_stripes_container。

すべてのブラウザに対応した上記の CSS グラデーションは、こちらにあります。

Lea Verouから盗まれたコード。

于 2012-07-16T05:40:49.990 に答える
0

Opera 12.01 ではこの問題が修正されていますが、このトピックとは関係のない別のバグがあります。これが解決策ではないことはわかっていますが、コメントよりも見やすくしたかったのです。

于 2012-08-17T14:42:51.317 に答える