JQuery 메서드 .before() 또는 .insertBefore() IE7에서

.before() jQuery 1.5.1 메서드를 사용하여 확인란 앞에 색 div를 삽입하려고합니다.이 메서드는 FF, Chrome, IE8 +에서 올바르게 실행됩니다. 하지만 IE7의 경우 삽입 된 색상 div는 확인란과 같은 줄에 있지 않습니다. 누군가 내가 조언을 해줄 수 있었으면 좋겠어. 감사. 업데이트] IE8 JQuery 메서드 .before() 또는 .insertBefore() IE7에서

추가 플로트 :

<!DOCTYPE HTML> 
<html> 
    <head> 
    </head> 
    <body> 
     <input type="checkbox" id="check1" />PINK 
     <script type="text/javascript"> 
     var colorHtml = '<div style="border: 1px solid rgb(204, 204, 204); display: inline-block; margin-left: 20px; width: 12px;"><div style="width: 4px; height: 0pt; border: 4px solid rgb(200,100,200); overflow: hidden;"></div></div>'; 
     $("#check1").before(colorHtml); 
     </script> 
    </body> 
</html>

스크린 샷 :

IE7 : IE7

IE8을 코드 부착 왼쪽 : enter image description here

float를 사용하지 않고 "zoom : 1; * 디스플레이 : 인라인; " enter image description here

출처

2011-11-09 Simon

변화 디스플레이 : 인라인 방어가 문제 블록 디스플레이 유형이

출처

2011-11-09 18:18:50

이 경우에는 작동하지 않습니다. – Simon

죄송합니다. 인라인으로 설정됩니다. –

작동하지 않습니다 ... 감사합니다! – Simon

당신은에 의해 같은 줄에 그들을 얻을 수있는 태그 뒤에 줄 바꿈을 야기 수정해야, 인라인합니다. 당신의 colorHtml 외부 DIV의 스타일에 float:left;를 추가 : 여기

<div style="float: left; border: 1px solid rgb(204, 204, 204); display: inline-block; margin-left: 20px; width: 12px;"><div style="width: 4px; height: 0pt; border: 4px solid rgb(200,100,200); overflow: hidden;"></div></div>

것은 jsfiddle입니다 :.. http://jsfiddle.net/G4sY4/2/

출처

2011-11-09 18:19:01 Jasper

그것은 작동하지만 완벽하지는 않습니다. 정확히 같은 줄에 그들을 만드는 법을 아십니까? 보시다시피 컬러 div는 여전히 확인란보다 약간 높습니다. 도움을 주셔서 감사합니다! – Simon

물건을 줄에 맞추고 싶을 때 나는 보통 컨테이너 요소를 추가하고 줄 높이를 설정합니다. – Jasper

문제는 inline-block 스타일의 설정 함께 IE7은 정말 제대로하지 않습니다 FL 시도 컨테이너 내에서 왼쪽으로 치우친 후 inline-block을 설정하지 마십시오.

업데이트 : http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

요약 : 당신은 문제에 대한 설명과 주변에 다른 일을 찾을 수 있습니다 추가 ": 1; * 디스플레이 : 줌 인라인;"

출처

2011-11-09 18:22:02 tvanfosson

이 경우 작동하지 않습니다 .. – Simon

지금 색상 상자는 대략 같은 줄에 있지만 조금 더 낮습니다 ... – Simon

JQuery 메서드 .before() 또는 .insertBefore() IE7에서

답변

관련 문제