創建箭頭CSS和背景圖像

Question

：IE
：火狐

我試圖創建水平可能會改變大小的箭頭。它應該使用代表以下3個圖像：< --->

我試圖用div和css做到這一點，但它不在IE中工作。身體圖像不居中，看起來像是下劃線。但是，在身體居中的firefox或chrome中不會發生這種情況，並且會與左側和右側圖像的頂端對齊。 < ____>：IE（錯誤） < ----->：火狐（右）

我有以下幾點：

.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> 

如何使它將有什麼建議？

非常感謝！

Answer 1

可以使用background-size財產伸展背景圖像

background-size:width height; 

和定位的背景圖像，您可以使用Background-position財產

Answer 2

這可能會實現。你的div不正確。

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

然後你將不得不添加float：left;到你的divs我猜。

.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; 
} 

Answer 3

你應該使用：after和之前，以避免不必要的標記。它適用於IE8，但您的文檔必須具有文檔類型。

.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> 

您所需要的Ajust值。更多的信息在這裏：http://www.w3schools.com/cssref/sel_after.asp

這適用於IE8和更高版本。 （和其他瀏覽器）

編輯：忘記也許是最重要的你的情況：使用頂級屬性來調整你的箭頭對齊。