집 > 기사 > 웹 프론트엔드 > HTML 웹 페이지 정렬이 잘못된 이유와 해결 방법

HTML 웹 페이지 정렬이 잘못된 이유와 해결 방법

php中世界最好的语言원래의: 2017-11-29 12:01:226091검색

동일한 행의 레이아웃을 설정해야 하는 경우가 종종 있는데, 여러 가지 이유로 정렬이 어긋나는 경우가 있는데, 웹 페이지 레이아웃이 어긋나는 데에는 아마도 두 가지 이유가 있다고 정리했습니다. 오늘은 자세히 분석해 보겠습니다. 이유와 해결책.

한 행에 표시하도록 설정하려는 레이아웃이 여러 가지 이유로 잘못 정렬되는 경우가 종종 있습니다. 그 결과 행의 마지막 상자 레이아웃이 잘못 정렬되어 떨어지는 것입니다

DIV CSS 웹 페이지 레이아웃이 잘못 정렬되었습니다. 아마도 두 가지 상황이 있을 수 있습니다. 하나는 너비 계산 오류로 인해 발생하고 다른 하나는 IE BUG, 특히 IE6 및 IE7로 인해 발생합니다. 다음으로, 탈구와 그 해결 방법을 소개하겠습니다.

너비 계산 오류 해결 방법

너비 계산 오류, 총 너비가 500px이면 상자가 3개 있고 CSS 너비가 각각 200px, 200px, 100px이면 어긋남 없이 한 줄로 표시되지만 추가하면 CSS 테두리, padding 및 margin 속성을 사용할 때 이러한 속성이 차지하는 너비를 잊지 마세요. 특히 패딩과 테두리가 차지하는 너비 공간을 무시하지 마십시오. 왼쪽과 오른쪽 테두리가 추가된 상자가 있으면 이때 너비가 딱 맞고 테두리가 차지하는 너비가 2px만큼 줄어든 상자가 있습니다. 그렇지 않으면 세 상자의 전체 너비가 더 커집니다. 전체 폭보다 넓어 정렬 불량이 발생합니다.

너비 문제로 인한 CSS 레이아웃 정렬 불량 요약:

내부 상자 너비의 합이 외부 너비보다 커서 정렬 오류가 발생합니다. 확인할 때 설정된 너비, 테두리, 패딩 및 여백의 합을 계산해야 합니다. .

IE BUG, 특히 IE6과 IE7이 정렬 오류를 일으킵니다

이 문제는 가장 일반적인 문제입니다. 첫 번째 너비 문제를 확인했는데 현재 IE6과 IE7에서는 너비가 잘못 정렬되어 있습니다. IE8 및 others 이때는 margin 속성을 사용할지 여부를 고려해야 합니다. 일반적으로 CSS float(css float)을 사용할 때는 margin(margin)을 사용합니다. -right margin-left특히 여기서) 이 속성) 이 속성은 이중 값을 생성합니다. 이때 이 문제를 해결하려면 CSS 해킹을 사용해야 합니다. IE6 또는 IE7에서는 지정된 여백 스타일만 인식하도록 합니다.

예:

1. IE6은 별도로 식별됩니다(IE6의 경우에만 왼쪽 여백이 잘못 정렬됨)

{margin-left:5px;_margin-left:2px}

이때 IE6를 제외한 다른 브라우저에서는 다르게 설정됩니다. margins -left:5px, IE6에서 인식됨_margin-left:2px

2, IE7과 IE6 모두에서 인식됨(margin-left는 ie6 및 ie7의 다른 버전과 브랜드 브라우저를 구분하지 않음)

{margin-left:5px ; *margin-left:2px;}

현재 IE6 및 IE7을 제외한 다른 브라우저에서는 margin-left:5px를 설정하고, IE6 및 IE7에서는 *margin-left:2px

이 사례를 읽어보니 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!