지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

css:margin:0 자동은 ie8에서 중앙에 위치할 수 없습니다.

黄舟
풀어 주다： 2017-07-21 13:43:54
원래의
1995명이 탐색했습니다.

오늘 나는 margin:0 auto;를 사용하여 속성을 정의하고 중앙에 배치하는 div를 작성했지만 유효하지 않은 것으로 판명되었습니다.
　처음에는 CSS의 코드 충돌인 줄 알았습니다. 여러 번 확인해보니 괜찮았습니다. 그러다가 Firefox와 Google Chrome으로 테스트해 보니 중앙에 맞춰져 있었습니다. . .
브라우저 호환성 문제인 것 같습니다. win7을 사용하고 있는데 IE가 IE8로 업그레이드된 것이 갑자기 생각났습니다. 문제는 IE8의 호환성인 것 같습니다. 바이두. . . .

　해결책은 다음과 같습니다.
　IE6, 7 및 Firefox에서 센터링을 달성하려면 일반적으로 margin:auto를 사용하여 이를 달성하지만 IE8에서는 이것만으로는 충분하지 않습니다. 이제 두 가지 솔루션이 제공됩니다.

방법 1(권장):

먼저 문서 유형을 페이지 상단에 설정해야 합니다: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition al.dtd">
로그인 후 복사

및 헤드에 추가: 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 即可！
로그인 후 복사


방법 2:

본문 settings {text-align :center;width:100%;}
　

에 모든 div를 포함하고, 랩은 다음과 같이 설정됩니다: 

　#wrap    
　{ 
　text-align:left; 
　width:***;  
　margin:0 
　auto; 
　 }
로그인 후 복사

　그리고 헤드에 추가: 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
로그인 후 복사

그게 다야!

　 방법 3:

　

를 사용하여 두 번째 레이어의 랩 레이어를 교체합니다.

위 내용은 css:margin:0 자동은 ie8에서 중앙에 위치할 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
auto margin
원천：php.cn
이전 기사：CSS에서 유효하지 않은 여백:0 자동에 대한 솔루션 다음 기사：CSS3의 box-shadow 외부 그림자 및 외부 광선의 예에 대한 자세한 설명(그림)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
고정 위치의 자식이 부모의 패딩을 무시함 고정 요소가 헤더 뒤로 이동하는 것을 방지하는 방법은 무엇입니까? 현재 코드 조각은 상위 항목에 padding-top을 사용합니다. 또한 추가 하위 항목에 mar...
에서 2024-04-06 11:42:51
0
1
338
너비가 고정되고 최대 너비가 90%인 그리드 하위 항목이 그리드 트랙을 오버플로하는 이유는 무엇입니까? 질문: 제 질문은 매우 간단합니다. .header 요소가 뷰포트 너비 1500픽셀에 도달할 때 그리드 트랙을 오버플로하는 이유를 알고 싶습니다. 코드: *{box...
에서 2024-04-05 14:33:39
0
1
1426
CSS를 사용하여 Next.js의 Tic-Tac-Toe 보드에서 각 줄 아래의 공간을 제거하는 방법은 무엇입니까? 각 줄 아래에 공백이 있는 이유는 무엇입니까? (CSS) 저는 제 실력을 테스트하기 위해 Next.js tic-tac-toe 앱을 만들려고 합니다. 그러나 CSS...
에서 2024-04-05 11:39:02
0
1
1431
모바일 크기 화면에서 단락을 왼쪽으로 이동하기 위한 CSS 및 HTML 방법 일반 16:9 컴퓨터 화면에서는 왼쪽에 텍스트가 있고 오른쪽에 이미지가 있어 완벽하게 보입니다. 그러나 더 작은 화면(예: 휴대폰 크기)의 경우 원하는 대로 단락...
에서 2024-04-04 20:25:22
0
1
330
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿