2011-04-18 3 views
0

IE7의 DIV 컨테이너에있는 간단한 이미지에 문제가 있습니다.Image Difference IE7 ~ IE8/IE9/FF4

<div id="divSearchBottomLinks" class="divSearchBottomLinks"> 
    Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr... 
    <div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect"> 
     <img src="Images/Design/DefaultPage/searchButtonEffect.png" alt="" 
      style="border: 1px red solid;" /> 
    </div> 
</div> 

CSS는 다음과 같습니다 : http://s3.imgimg.de/uploads/2204cc79eJPG.jpg

로 :

여기
.divSearchButtomLinksEffect 
{ 
float:right; 
padding-right:8px; 
} 
.divSearchBottomLinks 
{ 
border: 1px solid red; 
width: 99%; 
height: 15px; 
text-align: left; 
font-size: 10px; 
word-spacing: 8px; 
color: Gray; 
} 

는 같은 보이는 방법이다

내가 그것을 내 홈페이지에 몇 번 이곳 예입니다 당신은 볼 수 있습니다 : 아무 이유없이, 이미지가 더 아래쪽에 있어야하고, 다른 쪽은 FF4 (Internet Explorer 8/IE9/Opera9/Opera10과 동일)를 보았고 ap7을 가진 것처럼 보이는 IE7 만 볼 수 있습니다. 이것에 문제가있다.

나는 그것을 고치는 법을 볼 수 없다, 나는 단지 그것이 어디에서 볼 수 있는가 ... 어떤 생각인가?

+0

Internet Explorer는 매우 똑똑 할 수 있습니다. 내가 수년 동안 배운 한 가지는 분명히 DOCTYPES를 지정하는 것입니다. 필요한 경우 IE IF 문을 사용하여 별도의 CSS 시트를 지정할 수 있습니다. http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx – PlagueEditor

답변

4

어떤 이유로 인해 오른쪽으로 떠있는 요소가 IE7의 줄에있는 텍스트 아래에 떠 다니고, div 요소가 기본적으로하는 것처럼 텍스트가 컨테이너의 전체 너비를 차지하고 부동 요소를 아래로 밀어냅니다 .

div 요소의 이미지 앞에 텍스트를 놓고 왼쪽으로 플로팅하면 오른쪽으로 떠있는 요소가 아래로 밀리지 않습니다.

+0

고마워, 그것은 여기에서 작동 :) – Kovu

1

나는이 대신 같은 것을 함께 이동하려고 할 것입니다 :

<div id="bottomLinks"> 
    <p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr... 
    </p> 
    <img src=".." /> 
</div> 
<style> 
div#bottomLinks { 
    overflow: hidden; 
    } 
    div#bottomLinks p { 
    float: left; 
    } 
    div#bottomLinks img { 
    float: right; 
    } 
</style> 

당신하고 발생한 문제는 지금 아마 때문에 width 99 %이며 첫 번째 요소는 뜨지 않습니다.

1

브라우저에는 다양한 HTML 요소에 대한 다른 기본 CSS가 있습니다. 내가 할 첫 번째 일은 모든 요소가 동일한 기본 설정으로 시작되도록 좋은 재설정을 추가하는 것입니다. 그러면 디버깅 프로세스에서 추측 된 작업 중 일부가 수행됩니다. 당신의 CSS의 나머지 전에이 추가 -

http://meyerweb.com/eric/tools/css/reset/

다음, 당신은 항상 떠 컨테이너의 폭을 지정해야합니다. 특히 너비를 지정하지 않으면 IE에 문제가 있습니다.