jQuery UI 정렬 가능한 IE8에서 깨진 이미지를 보여줍니다

StackOverflow https://stackoverflow.com/questions/815217

문제

쿼리 정렬 가능한 이미지 모음이 있습니다. 항목은 IMG로 설정되어 있습니다 (탭 컨트롤에 있고 수평 목록이므로 목록 항목에 정렬 할 수 없으므로 IE8을 제외한 모든 곳에서 완벽하게 작동합니다. 자리 표시자가 깨진 이미지를 표시하는 표준 준수 모드)에서도. IE8에서 자리 표시자를 보이지 않게하기 위해 사용할 수있는 CSS 설정이 있습니까? 나는 시도했다 

visibility : hidden;

나는 설정을 시도했다 

content : url(transparent.gif);

어떤 효과가없는 것 같지 않습니다. 이것을 해결하려면 어떻게해야합니까? DOM Explorer (또는 IE8 개발자 도구에서 불리는 모든 CSS가 표시되는 CSS를 검토 할 수있는 방법에 대한 제안) 마우스를 놓아 주면 사라지고 DOM이 IMG를 볼 수 없습니다. Explorer는 Firebug가하는 방식을 실시간으로 업데이트하지 않는 것 같습니다.

편집 : 여기에 복제 된 Probelm이 있습니다 http://jsbin.com/irozu

내 예를 지나치게 단순화했는데, 다른 문제는 전체 탭이 스크롤 가능하며 슬라이더로 제어된다는 것입니다. 바꾸다 

display : inline;

에게 

float : left;

더 이상 스크롤 가능한 항목 목록이 없으므로 작동하지 않습니다. 또한 이상한 이유로 스크롤 바가 있고 "IMG"대신 대상 대신 "li"를 사용하면 정렬 가능한 작업이 작동하지 않습니다.

업데이트 된 예제는 다음과 같습니다. http://jsbin.com/ahawi.

도움이 되었습니까?

해결책

자리 표시자가 깨진 이미지를 보여주는 곳. IE8에서 자리 표시자를 보이지 않게하기 위해 사용할 수있는 CSS 설정이 있습니까? 나는 시도했다

jQuery UI가 자리 표시 자에 대한 SRC 속성이없는 IMG 요소를 생성하기 때문에 깨진 이미지가 나타납니다. 이 문제를 해결하려면 :

  1. 자리 표시 자 옵션을 설정하지 마십시오

  2. .showplace 클래스를 같은 것으로 변경하십시오

    .showPlace {
   margin: 20px;
   overflow: hidden;
   width: 0; height: 0;
}

위의 코드는 (존재하지 않는) 이미지 컨텐츠를 숨기지 만 요소가 표시됩니다.

BTW. 내 테스트 사례에서 설정 visibility: hidden 에게 .showPlace 또한 잘 작동했습니다

다른 팁

자리 표시자를 보여주고 싶지 않다면 하지 마라 Sortable을 설정하십시오 placeholder 옵션.

IE8의 기본 정렬 가능한 동작에 문제가 없습니다. 이 호스팅 된 예에서 설명한 내용을 재현하려고 노력했습니다. http://jsbin.com/osobu (정렬 가능한 이미지는 세 번째 탭에 있습니다.)

더 많은 코드를 제공하거나 내가 제공 한 샘플 만 편집하면 도움이 될 것입니다. http://jsbin.com/osobu/edit) 문제를 복제하기 위해.

편집하다

귀하의 의견에 응답하여 items 옵션 "li" 그리고 문제는 고정되었습니다. 또한, 나는 당신이 사용해야합니다 

#images li { float: left; }

대신에 

#images li { display: inline: }

그렇지 않으면 이미지를 드래그하는 동안 이미지가 오프셋됩니다.

고정 데모는 다음과 같습니다. http://jsbin.com/osezu

나는 그것을 고치고 코드를 상당히 줄였습니다.

주요 문제는 당신이 UL보다는 div 정렬을 설정하는 것이 었습니다.

원하는 방식으로 작동하는 것 같습니다. http://jsbin.com/egiwu

당신은 시도 할 수 있습니다 : display: none;.

다음은 또 다른 해결 방법입니다.

$('.mysortthings').sortable({
  start: function(event,ui) {
        $('.ui-sortable-placeholder').each( function() {
           this.setAttribute('src','/ico/unipixel.gif'); } );
       }
});

다시 말해, 일이 시작 되 자마자 자리 표시 자 IMG의 'SRC'속성을 설정하는 시작 이벤트 핸들러를 설정하십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top