css - IE7在新行上 float

我的应用程序在时间轴上使用了一些小节。每行都由一个barkeeper div组成，该div保持该行的条形。酒吧老板还具有2个样式属性，即宽度和高度。

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

这些酒吧有一些互动的ajax动作，这些动作来自Richfaces和CSS悬停以及jquery javascript。因此，每个栏周围都有一个表格。我省略了动作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">

这将在条的末尾显示一个正在运行的箭头，以指示其仍在运行。

现在，每个浏览器都能正确显示所有这些信息。拐角将添加到拐角，并且如果可用，箭头会覆盖条形图的右侧，并与该处的两个拐角重叠。




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

最佳答案

我自己找到了解决方案。

我已从更改了箭头图像标签

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

至

<img style="position:absolute; right:0px;" src="endarrow.gif">