用css和背景图像创建箭头

Question

：IE
：Firefox

我正在尝试创建一个可能会水平改变大小的箭头。它应该使用3个代表以下内容的图像：＆lt; ---＆gt;

我正在尝试使用div和css，但它不适用于IE。身体图像不居中，看起来像是下划线。但这不会发生在firefox或chrome中，身体居中，并与左右图像的尖端对齐。 ＆LT; ____＆gt;：IE（错误） ＆LT; -----＆gt;：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>

有关如何制作它的任何建议吗？

非常感谢！

Answer 1

您可以使用background-size属性来拉伸背景图片

background-size:width height;

并且对于定位背景图片，您可以使用Background-position属性

Answer 2

您应该使用：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>

您需要的Ajust值。更多信息请访问：http://www.w3schools.com/cssref/sel_after.asp

适用于IE8及更高版本。 （和其他浏览器）

编辑：忘记也许对你的情况最重要：使用top属性来调整箭头的对齐方式。

Answer 3

这可能有用。你的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;
}