0

すなわち画像: IE
Firefox イメージ: ファイアフォックス

水平方向にサイズが変わる可能性のある矢印を作成しようとしています。以下を表す 3 つの画像を使用することになっています: < --- >

div と css でそれを実行しようとしていますが、IE では機能しません。本体の画像が中央になく、下線のように見えます。しかし、これは、ボディが中央に配置され、左右の画像の先端に位置合わせされる Firefox や chrome では発生しません。< ____ >: IE (間違い) < ----- >: Firefox (右)

私は次のものを持っています：

.bodyArrow {
    width: 38px;
    background: url("../../images/ArrowBody.png") repeat-x center;
    height: 5px;
}
.arrowLeft {

    height: 5px;
    padding-left: 38px;
    background: url("../../images/ArrowLeft.png") no-repeat 0 0;
}
.arrowRight {
    height: 5px;
    font-style: normal;
    padding-right: 3px;
    background: url("../../images/ArrowRight.png") no-repeat 100% 0;
}

<table>
<tr>
<td> something </td>
<td>
    <DIV  class="bodyArrow">
    <DIV  class="ArrowLeft">
    <DIV  class="ArrowRight">
    </DIV></DIV></DIV>

</td>
<td> something </td>
</tr> 
</table>

それを作る方法について何か提案はありますか？

どうもありがとうございました！

4

3 に答える 3

1

プロパティを使用background-sizeして背景画像を引き伸ばすことができます

background-size:width height;

背景画像を配置するには、Background-positionプロパティを使用できます

于 2012-10-29T14:43:39.823 に答える
1

不必要なマークアップを避けるために、:after と :before を使用する必要があります。IE8 で動作しますが、ドキュメントには doctype が必要です。

.arrow {
    position: relative;
    width: 38px;
    background: url("../../images/ArrowBody.png") repeat-x center;
    height: 5px;
}

.arrow:before {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    left: *what you need*;
    background: url("../../images/ArrowLeft.png") no-repeat 0 0;
}

.arrow:after {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    right: *what you need*;
    background: url("../../images/ArrowRight.png") no-repeat 0 0;
}

次に、htmlで必要なのは次のとおりです。

<div class="arrow"></div>

必要なものに合わせて値を調整します。詳細はこちら: http://www.w3schools.com/cssref/sel_after.asp

これは IE8 以降で機能します。（および他のブラウザ）

編集:おそらくあなたのケースで最も重要なことを忘れました: top プロパティを使用して矢印の配置を調整します。

于 2012-10-29T14:53:58.673 に答える
0

これはうまくいくかもしれません。あなたのdivは正しくありません。

<div class="bodyArrow"></div>
<div class="ArrowLeft"></div>
<div class="ArrowRight"></div>

次に、float:left; を追加する必要があります。私が推測しているあなたのdivに。

.bodyArrow {
width: 38px;
background: url("../../images/ArrowBody.png") repeat-x center;
height: 5px;
float:left;
}
.arrowLeft {

height: 5px;
padding-left: 38px;
background: url("../../images/ArrowLeft.png") no-repeat 0 0;
float:left;
}
.arrowRight {
height: 5px;
font-style: normal;
padding-right: 3px;
background: url("../../images/ArrowRight.png") no-repeat 100% 0;
float:left;
}
于 2012-10-29T14:43:58.860 に答える