IE7 float on new line

내 응용 프로그램은 타임 라인의 일부 막대를 사용합니다. 모든 라인은 barkeeper div로 구성되며이 라인의 막대를 포함합니다. barkeeper에는 너비와 높이의 두 가지 스타일 속성도 있습니다.IE7 float on new line

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

막대는 Richfaces 및 CSS 호버 및 JQuery와 자바 스크립트에서 오는 약간의 대화 아약스 작업을해야합니다. 그러므로 각 막대 주위에 형태가 있습니다. 이 예제를 단순화하기 위해 자바 스크립트를 생략했습니다.

.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_bottom 클래스가 identicaly 사용되는 이미지를 제외하고 정의

.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_top 및 cornr_bottom를 추가했습니다 있도록 둥근 모서리를해야합니다.

내가 추가 한 마지막 것은

이 라인

<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="position:absolute; right:0px;" src="endarrow.gif">

에

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

에서 화살표 이미지 태그를 변경 한

출처

2012-06-05 09:30:37 gadeynebram

IE7 float on new line

답변

관련 문제