1

スライドドアの手法を使用して、作成しているサイトのボタンのスタイルを設定しています。Chrome内で機能しているようですが、他のブラウザでは背景が表示されません。ボタンの私のコードは以下の通りです：

<div class="small-white"><a href="#">Done Reading</a></div>

CSS：

.small-white { 
    float:left; 
    background:url(images/small-white-sprite.png) right no-repeat; 
    margin: 15px 5px 0 5px; 
    padding:0; 
    display:block;
            height:22px;
}
.small-white a {
    display:block;
    background:url(images/small-white-left.png) no-repeat left;
    padding:4px 10px 7px 9px;
    color:#333;
    text-decoration:none;
    float:left;
}

お知らせ下さい。

前もって感謝します。-B

4

1 に答える 1

1

いずれにせよ 2 つの画像を使用しているため (Sliding Doors には通常 1 つの画像のみが含まれます。実際、それがポイントです)、透明性を維持するために代わりにこれを行うことができます。

.small-white { 
    background: url(images/small-white-left.png) no-repeat 0 0;
    float: left;
    margin: 15px 5px 0 5px;
    padding: 0 0 0 9px; /* NOTE: 9px should be replaced with the width of above
                                 image. */
}
.small-white a {
    background: url(images/small-white-sprite.png) no-repeat 100% 0;
    color: #333;
    display: block;
    height: 22px;
    line-height: 22px;
    padding: 0 10px 0 0;
    text-decoration: none;
}

<a>要素は持つべきではありませんfloat: left;(要素内に浮遊するものがないため<li>)。line-heightは、テキストを垂直方向に中央揃えするためのものです。

透明度では画像を1つだけ使用することはできませんが、背景色がどうなるかがわかっている場合は、その色で画像を平坦化することができます.small-white-left.pngの左側に追加しsmall-white-sprite.png、それを両方の要素に使用します。)

ボタンの左端をクリック可能にしたい場合は、<span>要素内のテキストを要素で囲み、次の<a>CSS を使用します。

.small-white { 
    float: left;
    margin: 15px 5px 0 5px;
    padding: 0;
}
.small-white a {
    background: url(images/small-white-left.png) no-repeat 0 0;
    color: #333;
    display: block;
    padding: 0 0 0 9px;
    text-decoration: none;
}
.small-white span {
    background: url(images/small-white-sprite.png) no-repeat 100% 0;
    display: block;
    height: 22px;
    line-height: 22px;
    padding: 0 10px 0 0;
}
于 2009-07-26T19:08:43.630 に答える