IE7浮在新行上

我的应用程序在时间轴上使用了一些条。每条线都包含一个barkeeper div，用于存放此线条。酒吧老板也有2种风格的属性宽度和高度。IE7浮在新行上

.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>

使用左参数和宽参数绝对定位这些条。

条必须有圆角，所以我已经添加了这些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类identicaly除了所使用的图像定义。

我加的最后一件事是此行

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

这显示在酒吧结束运行的箭头来表明它仍在运行。

现在每个浏览器都能正确显示所有这些信息。角落被添加到角落，并且如果可用的话，箭头覆盖了酒吧的右侧并且在那里与两个角落重叠。

Arrow in firefox No arrow in firefox

在IE7的箭头被显示在新的一行。我该如何解决这个问题？

Arrow in IE7 No arrow in IE7

来源

2012-06-05 gadeynebram

我已经找到了自己的解决方案。

我已经改变了箭头图像标签从

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

到

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

来源

2012-06-05 09:30:37 gadeynebram

IE7浮在新行上

回答

相关问题