JavaScript로 브라우저 문제를 해결하는 방법 모음 [번역] 페이지 1/4_javascript 기술

이유를 이해하지 못하더라도 걱정하지 마세요. CSS 규칙을 자세히 알아보고 CSS를 사용하여 문제 해결: 20가지 일반적인 버그 및 수정 이 기사

를 살펴보세요.

위의 기사가 전혀 도움이 되지 않으면 아래의 12가지 자바스크립트 솔루션 중 하나를 사용하여 문제를 해결하고 모든 브라우저에서 페이지가 보기 좋게 보이도록 만들 수 있습니다.

이 기사에서는 웹 애플리케이션 개발에서 직면하는 가장 일반적인 CSS 문제에 대해 12가지 자바스크립트 솔루션을 제공합니다.

다른 CSS 관련 기사에도 관심이 있으실 수 있습니다.

• CSS를 사용하여 모든 작업 수행: 50가지 창의적인 예제 및 튜토리얼

• CSS를 사용하여 모든 작업 수정: 20가지 일반적인 버그 및 수정

1. 동일한 높이 설정

테이블을 버렸기 때문에 레이아웃 방식에 따라 시각적으로 동일한 높이로 열 또는 콘텐츠 블록을 생성하는 데 도전하세요.

1.1 jquery를 사용하여 동일한 높이 설정

jQuery 동일한 컨테이너에 있는 모든 박스 모델의 높이를 동일하게 설정할 수 있는 플러그인이 있으며 매우 간단한 그리드를 생성할 수도 있습니다. 물론 사용성 및 성능 측면에서 추가 성능 오버헤드가 최소화됩니다. 관점에서는 대신 간단한 JavaScript를 사용하는 것이 더 적합할 것입니다: equalHeights() 이 함수는 동일한 컨테이너에 있는 모든 형제 노드 요소의 높이를 감지한 다음 각 요소의 최소 높이를 가장 큰 높이 값을 가진 요소로 설정합니다. .

작동 방식

equalHeights()는 지정된 요소의 최상위 하위 노드를 반복하고 최소 높이 값을 높이 값으로 설정합니다.

• 데모 보기

1.2 jQuery를 사용하여 등고선 열 설정

동일한 높이를 설정하는 또 다른 jQuery 플러그인

$("#col1, #col2").equalizeCols();

위 코드는 #col1, #col2 열의 높이를 동일하게 설정합니다

$("#col1, #col2").equalizeCols("p,p" );

위 코드는 #col1과 #col2의 높이를 동일하게 설정하고, #col1과 #col2 아래의 p 요소에 추가 공간을 추가하는 요소를 추가합니다.