Firefox의 반응 형 트위터 부트 스트랩 페이지에서 여분의 여백/패딩을 발생시키는 JavaScript Javascript SDK

Question

부츠 스트랩에 기반한 내 페이지가 Firefox에서 오른쪽 25-30 픽셀의 오른쪽에있는 이유를 알아 내려고 노력했습니다. Firefox 윈도우가 폭이 600px 인 < 일 때 IE. 유동적 인 탐색 바 및 Facebook SDK 만 남을 때까지 코드 하나 하나를 하나씩 제거하기 시작했습니다. 그런 다음 Facebook JS SDK 참조를 제거하고 오른쪽에 패딩이 사라졌습니다.

당신은 여기를 볼 수 있습니다

FB JS는 SDK 포함, 여분의 오른쪽 패딩 : https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm

을 당신이 FB JS SDK를 제거하면, (오른쪽 패딩) 예상대로 작동 : https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm

내 페이지의 버튼처럼 Facebook JS SDK가 필요하므로 어떻게해야합니까?

이상하게도 사파리와 크롬에서 이것은 재현되지 않습니다. 파이어 폭스에서

스크린 샷 : IE에서

스크린 샷 :

Answer 1

CBroe가 제안한대로 #fb-root 스타일을 변경하려면 을 시도하고 #fb-root 스타일을 변경해보십시오. 그러나 다시 변경하거나 일부 기능을 사용 중지하는 일부 JS 작업이있을 수 있습니다.

그래서 나는 당신의 스타일에 이것을 추가 제안 : 당신이 매우 작은 창을 가지고 있고 수평 스크롤을 원하는 경우

이 수정

html { overflow-x: hidden; } 

, 하나 약간의 문제가 발생할 수 있습니다.

@media (max-width: 200px) { 
    html { overflow-x: auto; } 
} 

는 FF13에서 테스트하고, IE9는 (이하 200 픽셀로 IE9 창 크기를 조정할 수 없습니다) : 패딩이 200 픽셀 아래에 다시 나타납니다하지만 당신은 이것을 시도 할 수 있습니다.

Answer 2

그것은이를 일으키는 페이스 북 DIV 요소 #fb-root - 당신은 display:none 또는 위치를 absolute로 설정하면 Firebug를 통해 left:-200px라고 말하면 여분의 여백이 사라집니다.

그러나 SDK가이 요소를 사용하여 대화 상자 등을 표시하기 때문에 스타일 시트에서 그렇게하는 것이 좋지 않을 수 있습니다. 따라서 그 중 하나가 작동을 멈출 수 있습니다. (설정을 변경하면 display:none은 이전 버전에서 작동을 멈추기로되어 있습니다. IEs 완전히), 또는 SDK 자체적으로 다시 서식을 덮어 쓸 수 있습니다.

자신의 형식을 추가하려고하면 철저히 테스트해야합니다.