2

我的应用程序在时间线上使用了一些条。每行都包含一个 barkeeper div，该 div 包含该行的酒吧。酒吧老板也有 2 个样式属性宽度和高度。

.barkeeper {
    margin-bottom: 1px;
    position: relative;
}

这些栏有一些来自 Richfaces 和 CSS hover 和 jquery javascript 的交互式 ajax 操作。因此，在每个条形周围都有一个表格。我省略了动作 javascript 来简化这个例子。

.bar {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    z-index: 0;
}

<form id="j_id163:0:j_id165:0:medfrm" onmouseover="" method="post" name="j_id163:0:j_id165:0:medfrm" target="">
    <div id="bar1" class="bar antibiotic" onmouseout="" onmouseover="" style="left: 7px; width:1528px;">
        <img style="float:right;" src="endarrow.gif">
        <div class="cornr_top">
            <div></div>
        </div>
        <div style="text-align: center; direction: ltr;">Bartext </div>
        <div class="cornr_bottom">
            <div></div>
        </div>
        <script type="text/javascript">
    </div>
   <input type="hidden" value="" name="" autocomplete="off">
   <input type="hidden" value="" name="autoScroll" autocomplete="off">
   <script type="text/javascript">
   <input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="" name="javax.faces.ViewState">
</form>

使用 left 和 width 参数绝对定位条形。

条形必须有圆角，所以我添加了这些cornr_top 和cornr_bottom

.cornr_top div, .cornr_top, .cornr_bottom div, .cornr_bottom {
    font-size: 1px;
    height: 3px;
    width: 100%;
}

.cornr_top {
    background: url("../img/tr.gif") no-repeat scroll right top transparent;
}

.cornr_top div {
    background: url("../img/tl.gif") no-repeat scroll left top transparent;
}

除了使用的图像外，cornr_bottom 类的定义相同。

我添加的最后一件事是这一行

<img style="float:right;" src="endarrow.gif">

这会在栏的末尾显示一个正在运行的箭头，表示它仍在运行。

现在每个浏览器都能正确显示所有这些。角落被添加到角落，如果可用，箭头会覆盖栏的右侧并与那里的 2 个角落重叠。

火狐中的箭头 火狐没有箭头

在 IE7 中，箭头显示在新行上。我该如何解决这个问题？

IE7中的箭头 IE7没有箭头

4

1 回答 1

2

我自己找到了解决方案。

我已将箭头图像标签从

<img style="float:right;" src="endarrow.gif">

至

<img style="position:absolute; right:0px;" src="endarrow.gif">
于 2012-06-05T09:30:37.647 回答