this page의 하단에 여분의 공백이 표시되지만 IE7 및 Chrome (IE7 모드 및 호환 모드의 IE8에서 예상 됨)에서만 추가 공백이 표시됩니다. Here's IE7에서 나에게 어떻게 보이는지. Firebug 및 IE Developers Toolbar를 사용하여 코드를 검사했지만 이상은 발견되지 않았습니다. 누구든지이 브라우저 별 공백의 원인을 알고 있습니까? 감사.IE7 및 Chrome 페이지의 공백 문자 만
공백이있는 이유는 바닥 글의 로고에 상대적 위치 지정을 사용하기 때문입니다. 대신 절대 위치 지정을 사용하십시오.
Relative positioning은 원래 위치를 기준으로 요소를 이동하지만 원래 위치는 여전히 "가져온"이며 이후 요소는 아무 것도 변경되지 않은 것처럼 작동합니다.
이렇게 공백은 로고가 차지한 원래 위치 때문에 발생합니다. 바닥 글 안의 모든 요소에 position: relative을 주석 처리하면 해당 공백의 원인이 무엇인지 알 수 있습니다.
물론 절대 위치 지정 만이 문제를 해결할 수있는 유일한 방법은 아니지만 확실히 쉬운 방법입니다. 또한 위의 사항을 고려하면 (예 : 음수 여백으로 재생하는 경우) display: inline-block, display: table-cell을 사용하거나 상대 위치 지정을 사용할 수도 있습니다.
당신은 당신의 CSS에서 이것을 시도 할 수 있습니다 :
* { margin:0px; padding:0px; }
을 그 다음 몇 가지 요소의 패딩을 작동하거나 마진이 문제를 일으키는 경우.
나는 Firefox에서도 공백 문자를 사용합니다.
CSS에서 body 및 html에서 100 % 높이를 제거해보십시오.
이것이 이유인지는 확실치 않지만,이 종류의 문제를 만드는 요소에 100 % 높이의 상자 모델에서 버그를 보았습니다.
참고로, 귀하의 파일의 57 행에 있습니다.
로컬 복사본에서 시도했습니다. 불운. 그래도 고마워. –
좋지 않은 표현이지만 숨겨진 오버플로가 숨길 수 있습니다.
Firefox에서도 공백 문자를 사용할 수 있습니다. – cdmckay
내 로컬 사본에있는 CSS 파일 끝에 아무 것도 쓸 수 없습니다. 그래도 고마워. FF에 대해 알려 주셔서 감사합니다. –
*는 최소한의 선택자이므로 *! important를 규칙에 추가해야 할 수도 있습니다. – Neall