2012-01-05 3 views
0

나는 일련의 div 인 nav 메뉴, 메뉴 링크가있는 div 및 2px wide 'separator bar'이미지가 포함 된 '메뉴 분리 기호'div가 있습니다. 구분 기호 div의 너비는 24px이므로 적절한 구분을 형성합니다.다른 브라우저에서 다른 정렬

'메뉴 링크'의 일부에

된 div 내가 <\li>와 함께 정기적으로 가져가 드롭 다운을 메뉴에 부모 DIV로 드롭 다운에서 동일한 폭의 'jQuery를 사용하여 S 등, 나는 <\li>의 폭 만들기'를 , 그리고 나서 24px를 추가합니다 (그래서 2 개의 분리 기호 divs의 분리 기호 이미지로 확장되고 정렬됩니다). 그러면 왼쪽 위치가 추가되어 드롭 다운의 테두리가 분리 막대에서 연장됩니다.

Firefox에서는 모든 것이 정상입니다. 그러나 Chrome과 IE에서는 때로는 괜찮 으면서 때로는 그렇지 않습니다. '메뉴 링크 기본'의 내용에 따라 드롭 다운이 내려지는 경우가 있습니다. 때로는 드롭 다운이 때로는 한 픽셀 (때로는 10 픽셀)에 잘못 정렬되는 경우도 있습니다. FF에서는 메뉴 링크 div의 내용에 관계없이 매번 오른쪽으로 표시됩니다. IE와 Chrome에서는 콘텐츠에 따라 다릅니다. 예. 메뉴 링크 div의 "Artwork"은 드롭 다운이 완벽하게 정렬되어 있음을 의미하지만, 동일한 div의 "Artwork Shop"은 드롭 다운이 픽셀 단위로 두 개나 떨어져 있음을 의미 할 수 있습니다. 하지만 FF로는 모두 괜찮습니다 ...

이 문제가 발생했을 수있는 이유는 무엇입니까? 브라우저마다 픽셀이 다른 문자가 표시됩니까? jQuery는 IE/Chrome에서 FF보다 다른 이유로 너비가 다양합니까?

내 코드는 조금 지저분와 이미지를 포함하고 그래서 쉽게 ... 아직

편집을 예를 표시 할 수 없습니다 아직 웹에없는 : 당신은 예를 볼 수 있습니다, 어떻게 그것을 http://jsfiddle.net/jaslfpihdaddle/aFAF9/7/에서 모든 브라우저 및 다른 콘텐츠에서 동일한 내용을 표시하지 않습니다. 나는 누군가가 나에게 얼마나 바보라고 말하고, 매뉴얼을 읽고, 모두 쉽게 고쳐지기를 바라고있다. ;)

+1

에 오신 것을 환영합니다 (그러나 IE는 여전히 ... FF, 크롬과 사파리에 서로 다른 폭()들 얻는다)! 코드가 없어도 도움을 줄 수는 없습니다. –

+0

코드를 pastebin.com에 추가하십시오 CSS가 문제 일 수 있습니다. 문제 해결에 평결을 줄 수는 없습니다. –

+1

[this] (http://meta.stackexchange.com/questions/18584/how-to-ask-a-smart- 질문) 질문을 잘하는 법을 알고 ..''css','javascript' 또는 브라우저 관련 질문을한다면 [jsfiddle] (http://www.jsfiddle.com) 링크를 만드십시오. –

답변

0

문제는 margin : auto가 IE에서 망치고 있다는 것입니다. 그래서 jQuery가 드롭 다운이 여백 대신 자동으로 페이지에 놓이는 div를 만든다 : 자동, 모든 것이 OK 일 것이다! :)

웹 개발에

관련 문제