IE7浮在新线上

Question

我的应用程序在时间轴上使用了一些条形图。每一行都包含一个barkeeper 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中，箭头显示在新行上。我该如何解决这个问题？

Answer 1

我自己找到了解决方案。

我已经从

更改了箭头图片代码

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

到

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