브라우저 호환성은 CSS 레이아웃에서 항상 일반적인 문제였으며 이로 인해 초보자들이 많은 오해를 겪었습니다. 그래서 제 경험을 통해 대부분의 브라우저 호환성 문제를 피할 수 있는 두 가지 방법을 요약했습니다.
이 두 가지 방법에는 다음과 같은 장점이 있습니다.
1. HACK을 사용할 필요가 없습니다.
2. 간단하고 효과적이어서 한 눈에 이해할 수 있습니다.
3. 계층적 및 모듈형 레이아웃
4. 코드가 더 합리적이고 식별하기 쉽습니다.
방법 1: 내부 및 외부 간격 추가로 인해 발생하는 부동 정렬 문제 해결
일반적으로 다중 열 레이아웃에서 DIV를 부동화하려면 부동 소수점을 사용해야 합니다. 일반적으로 우리는 다음과 같은 효과를 얻기 위해 3개의 DIV를 작성합니다.
.gif)
이 효과를 얻기 위해 열이 직접 간격을 둘 수 있도록 여백을 추가하고 테두리와 패딩을 추가하여 내부 텍스트가 테두리에 달라붙는 것을 방지합니다. 그런데 코드를 작성한 후 예상치 못한 일이 발생했습니다.
.gif)
세 번째 열은 아래에서 실행되었습니다. 이것은 당신이 원하는 효과가 아닙니다. 그럼 분석해 보겠습니다. 일반적인 아이디어를 따르십시오. 전체 너비는 800px이고 왼쪽 열은 200px, 중간 열은 400px, 오른쪽 열은 200px입니다. 보기는 좋지만 열 사이에 간격이 있어야 하므로 변경해야 합니다. 왼쪽 열, 중간 열에 400px, 오른쪽 열에 190px 괜찮나요?
하지만 더 보기 좋게 만들려면 테두리를 추가합니다. 하지만 테두리가 너비도 증가한다는 사실을 잊어버렸습니다. 또한 열의 패딩을 10px로 늘렸습니다. 그래서 실제 너비는 다음과 같습니다. 왼쪽 열: 너비 200-외부 간격 10-내부 간격 20-테두리. 2=168 이므로 정렬 오류가 발생하지 않습니다. 하지만 이것이 조금 복잡하다고 생각하지 않나요? 계산기가 필요할 수도 있습니다. 이 레이아웃을 사용하면 일부 브라우저의 표시에 차이가 있습니다.
좋아, 내 방법에 대해 이야기해보자. 계층적 구분에 따라 레이아웃과 디스플레이를 분리합니다. 레이아웃은 너비와 부동 외에도 레이아웃이 최대 외부 간격을 추가하므로 계산하기가 더 쉽다는 것을 의미합니다. 그런 다음 테두리, 내부 및 외부 간격 등을 표시하기 위해 레이아웃 열에 또 다른 DIV를 추가합니다. 너비를 정의할 필요는 없으며 너비만 조정하면 됩니다. 여러분이 더 쉽게 기억할 수 있도록 즉석에서 시를 만들었습니다. 고정 너비는 부동이어야 하고 테두리나 패치는 없어야 하며 내부에 DIV를 넣으면 정의된 스타일이 작동할 것입니다!
방법 2: 내부 플로팅 요소가 외부 레이어에서 분리되는 문제 해결
제품 카탈로그나 사진 앨범을 만들기 위해 UL 또는 N DIV를 사용하여 원하는 효과는 다음과 같습니다.
.gif)
그러나 최근에는 디스플레이가 다음과 같이 보이고 외부 테두리가 위로 이동했습니다.
.gif)
이 문제에 대한 해결책은 실제로 매우 간단합니다.
1. 문제를 해결하기 위해 외부 레이어에 float:left;를 추가할 수 있습니다.
2. 또 다른 방법은 플로트가 끝난 후 플로트를 지우기 위해 끝에 DIV를 배치하는 것입니다.
3. 외부 레이어에 높이나 너비를 추가합니다.