2009-10-29 4 views
0

나는 div 안에 img가 있습니다. img를 "float : right"로 설정하고 div를 "overflow : hidden"으로 설정했습니다. div가 img보다 좁기 때문에 img의 왼쪽 부분이 잘리고 숨겨지기를 기대합니다. Firefox에서 실제로 그렇습니다. 그러나 IE는 img의 "float : right"속성을 인정하지 않고 항상 img를 div의 왼쪽에 고정시키고 img의 오른쪽 부분을 잘라냅니다. 이 문제의 해결 방법이 있습니까? 아니면 내가 잘못하고있는거야? 나는 IMG가 (왼쪽에서 오른쪽으로) jQuery의 "블라인드"효과 표시하고 유사한 블라인드 효과가 사라 원하기 때문에Internet Explorer : 오버플로 및 부동


**

나는이 작업을 수행 할 수있는 이유 배경 정보입니다 (다시, 왼쪽에서 오른쪽으로).

jquery의 기본 블라인드 효과는 왼쪽에서 오른쪽으로 사라지는 것을 처리하지 않습니다. 그 이유는 특정 모드 (숨기기 대 표시)와 특정 방향 (왼쪽 대 오른쪽 또는 위쪽 대 바닥) 조합은 div의 왼쪽 상단 위치의 추가 이동이 필요하다는 것입니다. 예를 들어 설명해 보겠습니다. 블라인드 효과를 사용하여 이미지를 왼쪽에서 오른쪽으로 표시하려고한다고 가정합니다. 음, 이것은 간단합니다. div 오버플로를 숨김으로 설정하고 이미지를 왼쪽으로 떠서 다음 div의 너비를 0에서 이미지 너비로 변경합니다. 반면에 블라인드 효과를 사용하여 이미지를 왼쪽에서 오른쪽으로 사라지게하려면 이미지를 오른쪽으로 떠올리게 설정하고 div의 너비를 이미지 폭에서 0으로 줄여야합니다. div의 왼쪽 위 모서리에서 오른쪽으로 이동하여 이미지의 오른쪽 가장자리를 고정 상태로 유지합니다.

필자는 왼쪽 위 모퉁이 움직임을 통합하기 위해 코드를 작성했으며 FF에서는 정상적으로 작동하지만 IE에서는 실패합니다. IE는 부동 소수점을 존중하지 않으므로 오른쪽의 이미지를 왼쪽에 고정시키려는 대신 "눈먼"애니메이션 대신 jquery의 "슬라이드"효과가 적용됩니다.

답변

1

당신은 IE 7에 대해 다음 시도 할 수 있습니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
</head> 
<body> 
<div style="overflow: hidden; width: 150px; direction: rtl;"> 
    <img src="yourimage.png" style="float: right" /> 
</div> 
</body> 
</html> 

방향을 : RTL styel는 IE 7 표준 모드를 ​​사용하여 IE 8에 나를 위해 작동합니다. IE 8 표준을 사용하는 IE 8은 방향 스타일이 필요하지 않습니다.

이렇게하면 문제가 해결되기를 바랍니다. div에서 가질 수있는 다른 콘텐츠와도 함께 작동하는지 잘 모르겠지만 이미지로 원하는 효과를 얻는 것처럼 보입니다.

+0

와우, 그게 효과가있어. direction 속성은 확실히 작동하지만 float 속성은 IE에서 무시됩니다. 사실, 나는 이미지의 플로트를 완전히 지정하지 않아도된다. 감사!!!! –

+0

BTW는 FF, IE 및 Chrome에서 direction 속성 만 사용하여 추가하고 싶습니다. –

+0

나는 그것이 기뻤다. 행운을 빕니다! –

0

최악의 경우 : 이미지의 왼쪽에 흰색 DIV를 밀어 넣으시겠습니까? 매우 크로스 플랫폼.

+0

이 솔루션을 생각하지 않았습니다. 그건 분명히 효과가있다. 유일한 것은 이미지가 복잡한 백 골트 (내 경우처럼) 위에 놓여 있다면 DIV는 자신의 배경과 동일한 복잡한 배경을 가져야한다는 것입니다. 그리고 그 문제는 같은 문제가 생길 수 있다는 것입니다. 단순하고 균일 한 배경을 위해이 방법을 구현하기 쉽고 매우 간단합니다. –