css - IE7 float 新行

Question

我的应用程序在时间轴上使用一些栏。每行都包含一个 barkeeper div，用于保存该行的栏。 Barkeeper 还有 2 个样式属性 width 和 height。

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

这些栏有一些来自 Richfaces 和 CSS 悬停以及 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 参数来绝对定位条形。

条形必须有圆 Angular ，所以我添加了这些 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">

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

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

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

Answer 1

我自己找到了解决方案。

我已将箭头图像标签更改为

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

到

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