IE7 이미지가 위치 된 컨테이너에서 오른쪽으로 유동합니다.

Question

사이트 왼쪽에 이미지가 나타나려고하므로 이미지의 오른쪽이 사이트 콘텐츠 옆에 항상 표시됩니다. 이것은 IE8 + 및 다른 브라우저에서 작동하지만 IE7에서는 그렇지 않습니다. 바로 float을 무시하는 것 같습니다.

IE7 모드 (그리고 IE8 또는 크롬 또는 원하는 결과에 대한 FF)를 참조하십시오 : http://jsfiddle.net/ehEym/2/embedded/result/ - 기본적으로 이미지의 오른쪽에있는 파란색 막대 코드 포함 사이트

옆에 표시되어야합니다 :

<div id="main"><h1>The main content</h1><p>Text</p></div> 
<div id="left"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Test_card.png" /> 
</div> 

스타일 :

#main { 
    width:300px; 
    margin:0 auto; 
    background-color:grey; 
} 
#left { 
    position: fixed; 
    display: block; 
    top: 0px; 
    left: 50%; 
    border: 0px; 
    margin-left: -350px; 
    padding: 0px; 
    overflow: hidden; 
    z-index: 100000; 
    width: 200px; 
} 
#left img { 
    border: 0px; 
    float: right; 
} 

어떤 아이디어?

Answer 1

그것은 나타난다. 따라서 래퍼의 너비가 좁아지면 img의 넓은 너비에 비해 래퍼의 왼쪽 가장자리가 래퍼의 왼쪽 가장자리에 맞춰 지도록하는 것이 좋습니다. 나는 img 폭과 동일한 부정적인 margin-left을 추가 한 The fix for this can be seen in this fiddle :

#left img { 
    border: 0px; 
    float: right; 
    margin-left: -640px; /* <-- equal to img width */ 
} 

내가이 일을 권장하는 방법에만 IE7을 대상으로. Firefox 나 IE9 +에 악영향을 미치지는 않지만 (웹킷을 테스트하지는 않았지만) IE8의 디스플레이에 문제가 발생했습니다. 다른 브라우저에는 필요하지 않으므로 조건부 주석 또는이 CSS에 대해 IE7을 대상으로하는 다른 방법을 사용해야합니다.

Answer 2

제시 한 CSS 코드는 정의 된 너비 인 px로 다른 요소 근처의 고정 된 위치로 이미지를 배치해야하는 위치를 계산하기가 어렵 기 때문에 수행하려는 것을 고려할 때 약간 이상합니다. 그 때문에 IE7이 작동해야합니다.

기본적으로해야 할 일은 한쪽에는 이미지가 있고 다른쪽에는 나머지 콘텐츠가 있어야합니다.

업데이트 CSS 코드는

body { 
    height:100%; 
} 
#main { 
    width:80%; 
    padding-left:20%; 
} 
#left { 
    position: fixed; 
    top:0; 
    left:0; 
    width:20%; 
    height:100%; 
} 
#left img { 
    display:block; 
    width:100%; 
    height:100%; 
} 

http://jsfiddle.net/ehEym/4/embedded/result/

당신을 위해 그 일을합니까? 또는 페이지 중심의 컨텐츠가 필요합니까? IE7은 img 그것이 float: right 적용에도 불구 #left 랩퍼의 왼쪽 오버플 허용되지 않는 것처럼