2013-01-11 5 views
1

나는 자바 스크립트를 통해 div에 절대적으로 배치 된 요소를 생성합니다. 각 요소의 위치는 세로로 2px 씩 다릅니다. 그러나 IE는 3 개의 요소마다 추가 수직 픽셀을 추가 한 다음 2 개의 요소마다 하나씩 추가하고 3 개의 요소마다 다시 추가합니다.IE에서 타겟을 절대적으로 배치 된

대기는 그림은 설명 :

What IE does http://f.cl.ly/items/2Q2Z051R1V090G061H0o/Image%202013.01.11%2012:13:47.png

나는 녹색, 올바른 사람 빨간색 블록을 행동 뒷면 색이있다. 크롬이 제대로 렌더링 (그리고 그렇게 파이어 폭스) : 나는 IE 개발자 도구를 사용하는 경우

What Chrome does http://f.cl.ly/items/2b3e3u433D2i1S421A01/Image%202013.01.11%2011:47:40.png

, 내가 CSS가 올바르게 설정되어 있는지 볼 수 있습니다

나 ' 요소에 zoom:1을 추가하려고 시도했지만 차이가없는 것으로 보입니다. I는 IE가 검출 될 때마다 3 개 다음 2 요소를 상쇄를 조정했지만, 한

var element = document.createElement("a"); 
element.style.fontSize = "6pt"; 
element.style.width = "20px"; 
element.style.height = "20px"; 
element.style.position = "absolute"; 
element.style.backgroundColor = "red"; 
element.style.zoom = "1"; 
element.style.display = "block"; 
var tofs = (columns * 2 + r * 20 - (c * 2)); 
var lofs = (c * 14 + (r + offset) * 9); 
trace(c + "," + r + ": " + lofs + "," + tofs); 
element.style.top = tofs + "px"; 
element.style.left = lofs + "px"; 
element.style.textIndent = "-10000px"; 
element.style.overflow = "hidden"; 
element.innerText = t; 
element.selectable = "no"; 
setBackgroundForSeat(t, element); 
target.append(element); 

동작하지 않는다 : 실제로 시각적 차이를 다음에

요소를 추가하는 코드는 인 요소는 2px (해킹 없이는 3px) 대신 1px이됩니다.

아이디어가 부족합니다. 아무도?

업데이트 : 다음은 설명한 동작의 JS 피들입니다. http://jsfiddle.net/uGHDh/5/

+0

이상합니다. 'bottom'위치도 계산 해보십시오. * 아마도 * top과 bottom 모두 설정하면 IE가 다르게 동작할까요? – bfavaretto

+0

6pt <20px이지만 라인 높이 및/또는 글꼴 크기를 조금 작게 설정하십시오. jsfiddle도 정말 도움이 될 것입니다. – Kraz

+0

글꼴 크기가 아닙니다. 나는 아무렇지도 않게 그 일에 열심히 노력했다. – Inferis

답변

0

나는 IE 툴바가 CSS를 올바르게 설정한다고 말하고 있지만 실제 값은 거짓말 일 수 있습니다. 귀하의 코드에서 부동 소수점 값을 얻는 것처럼 보이고, IE가 객체를 그릴 때 반올림 오류를 생성하는 것처럼 보입니다.

픽셀 값을 사용하기 전에 픽셀 값을 integar로 캐스팅 해 볼 수는 있지만 모든 브라우저에서 원치 않는 결과를 초래할 수 있습니다.

+0

부동 소수점 값이 표시되지 않습니다. 'r'과'c'는 ints ("row"와 "column")입니다. 'columns'와'offset'도 마찬가지입니다. 그래서 그게 문제가 아니에요. – Inferis

관련 문제