0

即图像: IE
火狐图片: 火狐

我正在尝试创建一个可能会水平改变大小的箭头。它应该使用代表以下内容的 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 回答