List Tag UL, OL, DL : 다른 브라우저의 호환성 문제

웹 페이지 제작 기사 소개 : HTML CSS 목록 요소 UL, OL, DL의 연구 및 응용 프로그램.

HTML 목록 요소 (OL, UL, DL 등)는 현재 웹 사이트 개발 및 제작에 널리 사용되지만 그 성질은 브라우저에서 다릅니다. 이 기사는 이러한 목록 요소의 기본 특성, 다른 브라우저의 다양한 호환성 문제를 분석하고 몇 가지 공통 응용 프로그램을 소개합니다.

초보자 나 CSS에서 경험이있는 사람들에게 도움이되어야합니다.

순서 대표 목록은 가장 일반적으로 사용되는 목록입니다. 다음 그림은 다른 브라우저에서 변정되지 않은 목록의 표시를 보여줍니다.

데모 페이지

위에서 볼 수 있듯이, 다른 브라우저 아래에서 변하지 않은 목록의 기본 설정은 약간 다릅니다. 물론 오늘날 실제 웹 사이트 프로젝트에서는 수정되지 않은 순서가없는 목록이 거의 없습니다. 그 이유 중 하나는 CSS 재설정으로, 비정규 목록에 대한 기본 목록 총알, 여백 또는 패딩을 제거했습니다.

순서 대표 목록의 특정 CSS 속성은 목록 스타일 유형, 목록 스타일 위치 및 목록 스타일 이미지입니다. 이 속성은 목록 총알의 유형, 태그의 위치 및 태그 대신 그림 사용을 설정합니다. 이 세 가지 속성은 목록 스타일과 병합 될 수 있습니다.

목록 스타일 유형 속성은 다른 값으로 설정할 수 있습니다. 다음 차트는 일부 값의 페이지 효과를 보여줍니다.

사용자의 브라우저 및 운영 체제에 따라 일부 목록 스타일 항목 값이 올바르게 표시되지 않을 수 있으며 일반적으로 기본값은 소수점 값으로 표시됩니다. 변하지 않은 목록 자체의 의미가 더 이상 존재하지 않기 때문에 불필요한 목록을 사용하여 값을 증가시키는 것이 좋습니다.

목록 스타일 위치는 목록 태그의 위치를 ​​위해 외부 (기본값) 또는 내부로 설정할 수 있습니다. 목록 스타일 이미지가 설정되면 이미지의 위치에도 영향을 미칩니다.

목록 스타일 이미지 속성은 정렬되지 않은 목록에 사용자 정의 고유 성능을 제공 할 수 있습니다. 불행히도,이 방법을 사용하여 IE에 프로젝트 번호를 추가하는 것은 많은 버그이므로 거의 사용되지 않습니다. 더 나은 솔루션은 목록의 Li 요소에 배경 이미지를 추가하고 그에 따라 배경 이미지의 위치를 ​​조정하고 반복되지 않은 상태로 설정하는 것입니다. MaxDesign.com 에서이 방법은 단계별 설명을 통해 시연되었으며 모든 브라우저에서 잘 작동합니다.

순서 목록은 목록 항목의 각 목록 항목 (예 : 1, 2, 3 등) 앞에서 증분 값이 필요할 때 사용됩니다. 정렬 된 목록의 목록 유형 목록 스타일 유형은 순서가없는 목록 아래로 설정할 수있는 모든 값으로 설정할 수 있습니다. 대부분의 경우, 주문 된 목록은 증분 값이 선행되거나 어떤 마크도 선행되지 않습니다. 순서가없는 목록과 유사한 동작을 달성하기 위해 순서 목록을 사용하는 것이 좋습니다. 이로 인해 주문 된 목록 자체의 의미론은 더 이상 정확하지 않습니다.

정의 목록은 정의 제목 (DT) 및 정의 자체 (DD)를 포함하는 정의 된 목록 항목을 표시하는 데 사용됩니다. 목록 항목을 정의 할 때 정확히 일치 할 필요가 없으며 다음 코드는 엄격한 XHTML에 따라 완전히 합법적입니다.

<dl> <dt> 무선 음악 Miguhui </dt> <dt> 코펜하겐 컨퍼런스 </dt> <dd> "10 월 포위"</dd> </dl>

이렇게하면 단일 DD에서 여러 DTS 또는 단일 DT에서 다중 DD를 사용할 수 있습니다.

목록의 시각적 표시를 정의하십시오. 기본적으로 각 브라우저의 표시는 아래 그림과 거의 동일합니다.

데모 페이지

위 그림에 해당하는 HTML 코드는 다음과 같습니다.

<dl> <dt> title </dt> <dd> 여기에 정의가 있습니다 </dd> </dl> <dl> <dt> 인기 영화 </dt> <dd> 10 월 Siege </dd> <dd> taoling </dd> <dd> 세 개의 총을 테이블을 때려 주제 </dt> <dd> 주식 시장 </dd> <dd> 주택 가격 </dd> <dd> 새해의 날 </dd> <dd> Cao Cao 's Tomb </dd> </dl> 4. 쓸모없는 목록 : 메뉴 및 dir

기술적으로 <메뉴> 및 <dir> 요소는 HTML 목록이라고도 할 수 있지만 XHTML에서 구식이므로 여기에서 자세히 설명하지 않습니다.

HTML에서는 변하지 않은 목록은 본질적으로 동일하게 유지되지만 이제는 단순히 목록이라고 불리는 것처럼 보이며 새로운 요소는 목록을 탐색으로 래핑하는 데 사용됩니다.

OL 요소는 약간의 변화가 있으며, 두 가지 새로운 속성을 얻습니다. 반전, 이는 목록이 상승하는지 또는 떨어지는지를 나타내는 부울 값입니다. 시작, 주문 목록의 시작점을 선언하는 정수입니다.

또한 <Figure> 및 <cetlice> 요소가 추가되며 <dt> 및 <dd> 요소를 포함한 하위 요소가 있습니다.

HTML5에 대한 자세한 내용은 Taobao Kongyan의 공개 HTML5 및 CSS3 [Baibiao Milk Tea Gang]에 대한이 기사를 참조하십시오. 또한 온라인 ppt를 보려면 여기를 클릭하십시오.

다음은 일반적이고 명백한 브라우저 차이점입니다.

Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3 및 Safari에서 디스플레이 추가 : 블록은 순서 또는 비정규 목록의 Li 요소의 항목 번호가 사라지게됩니다.

그러나 IE6 및 IE7에서 디스플레이 추가 : 블록 총알이 여전히 존재합니다.

데모 페이지

IE6 및 IE7에서 플로트 추가 : 왼쪽 항목 (다른 스타일 없음)은 목록 항목이 수평으로 정렬되며 총알 (또는 품목 번호)이 사라집니다. 아래 그림과 같이 IE7 브라우저에서 절단됩니다.

IE8 및 기타 모든 브라우저에서 목록 항목은 수평으로 정렬되지만 총알 (또는 프로젝트 번호)은 여전히 ​​보입니다.

데모 페이지

목록 항목이 떠 오르면 다른 핵심 사항, 즉 목록 컨테이너 (UL 요소)가 내부에 떠 다니는 요소 만있을 때 죽습니다. 이것은 모든 브라우저에서 같은 방식으로 발생합니다. 오버플로 추가 : Hidden 은이 문제의 해결책 중 하나입니다.

다른 브라우저에서 거의 동일한 플로트 : 왼쪽 효과를 달성하기 위해 가장 좋은 방법은 디스플레이를 사용하는 것입니다 : 인라인.

IE6 및 IE7에서, 주문한 목록의 목록 항목에 레이아웃이있는 경우, 아래 그림과 같이 주문한 목록의 값은 증가하지 않으며 1로 표시됩니다.

데모 페이지

Haslayout 속성을 직접 설정할 수는 없지만 요소가 너비, 높이, 부동, 절대 포지셔닝을 갖도록 설정되면 대기가 변경됩니다.

대부분의 브라우저에서 총알이나 프로젝트 번호를 제거하고 컨텐츠의 왼쪽을 정렬하려면 왼쪽 패딩을 0으로 설정해야하지만 IE6 및 IE7에서는 작동하지 않습니다. IE6 및 7에서 왼쪽 여백을 0으로 설정하고 교체해야합니다. 아래 그림을 참조하십시오.

데모 페이지

다른 브라우저에서 목록 스타일을 처리 할 때 문제를 피하려면 가장 좋은 방법은 위에서 언급 한 CSS 재설정을 사용하는 것입니다. CSS 재설정은 브라우저의 거의 모든 기본 설정 차이를 설정하고 모든 브라우저가 동일한 기준으로 작동하도록 할 수 있습니다. 일부 스타일에는 여전히 차이가 있지만 어려운 지점으로 취급되지는 않습니다.

또한 앞에서 언급했듯이 목록 스타일 이미지 속성을 완전히 사용하지 않고 대신 배경을 대신 배경을 설정하는 것이 가장 좋습니다. 대신 브라우저를위한 맞춤형 기호 해결 방법, 정렬하기 쉬운 목록을 유지하기 쉽습니다.

지금까지, 가장 일반적인 목록의 가장 일반적인 사용은 수평이든 수직이든 내비게이션 막대입니다. 테이블 기반 레이아웃이 쓸모 없게되었으므로, 정렬되지 않은 목록은 다음과 같은 이유로 내비게이션 요소의 기초로 널리 사용되었습니다.

• 정렬되지 않은 목록은 블록 레벨 요소에 속하며 배경 또는 기타 그래픽 확장을 적용하기 위해 외부의 DIV를 래핑 할 필요가 없습니다.

• 스타일이 비활성화되면 목록 스타일이 침착하게 다운 그레이드되어 원래 스타일을 유지하여 탐색 항목이 페이지의 다른 내용과 다를 수 있습니다.

• 반대되지 않은 목록은 간단한 목록 일뿐 만 아니라 <a> 태그와 같은 요소를 추가하면 추가 <li> 요소가 탐색 막대를보다 유연한 형태로 표현하게 만듭니다.

• 내비게이션은 목록 및/또는 하위 목록으로 나뉘어 사용자가 전체 내비게이션 바를 쉽게 건너 뛸 수있는 보조 기술 (예 : 스크린 리더)을 사용할 수 있습니다.

예를 들어 : jQuery를 사용하여 구현 된 Lavalamp 특수 효과 메뉴

예를 들어, 얼마 전에 만든 드롭 다운 메뉴의 예 : jQuery는 SlidEtoggle을 사용하여 수직 드롭 다운 메뉴를 구현합니다.

효과 데모

HTML 목록 Tag UL, Li는 내비게이션 바에서 위에서 언급 한 것과 동일한 이유로 사진 목록을 표시하는 효과적인 방법을 제공합니다. 다음은 HTML 태그를 기반으로 한 일부 사진 갤러리 또는 사진 디스플레이 구성 요소입니다.

jcarousel

JCAROUSEL 사진 스위칭 전송 jQuery 플러그인은 주문되지 않은 목록을 사용하여 사용자 정의 가능한 jQuery 기능을 제공하며 여러 가지 방법으로 전송 효과를 표시 할 수 있습니다. 이 플러그인을 중국어로 번역했습니다. 여기를 클릭 할 수 있습니다.

내부 - jQuery

Innerfade 플러그인을 사용하면 모든 목록 형식의 컨텐츠가 디스플레이를 전환하거나 전환하거나 디스플레이를 위아래로 스위치 할 수 있습니다. 내용은 텍스트, 그림 등이 될 수 있습니다. 다양한 태그, 목록 태그, UL, Li, Div 및 P 태그를 지원합니다.

뉴스 또는 발표 내용의 자동 임의 전환 표시 또는 사진 슬라이드 쇼 등의 재생 표시 등을 쉽게 실현할 수 있습니다. 다음 그림은 이미지 슬라이드 스위칭의 전환 단계를 보여줍니다.

이 플러그인 데모는 여기를 클릭하기가 어렵습니다 : Innerfade 데모 페이지

많은 블로그 및 튜토리얼 웹 사이트에는 다음 스크린 샷과 같이 프리 요소 또는 텍스트 요소를 주문한 목록으로 변환하는 JavaScript 강조 코드가 포함되어 있습니다. 유명한 코드 하이라이트 플러그인 중 하나는 Alex Gorbatchev의 구문 Highlighter입니다.

아래는 강조 표시된 플러그인과 유사한 효과의 스크린 샷입니다.

효과를 미리 볼 수 있도록 여기를 클릭 할 수 있습니다 (데모 페이지에는 jQuery 쿠키 플러그인 코드가 표시됨).

이 WordPress 중심 사이트를 포함한 블로그 댓글은 순서대로 목록에 내장되어 있으며 매우 유연한 스타일 옵션을 제공하며 댓글 중첩을위한 기초를 마련합니다. 다음 그림은 Mr.Gray 이야기의 의견 섹션에서 스크린 샷입니다 - Web Interaction Design Grey 8 Applications Article Tencent CDC TD가 발표했습니다.

가장 전형적인 대표는 Taobao 홈페이지의 베이비 카테고리 칼럼에 수천 개의 제품 카테고리를 표시하는 것입니다.

스크린 샷에서 볼 수 있듯이이 카테고리의 목적은 DL, DT 및 DD 정의 목록을 사용하여 표시됩니다.

다중 이미지 업로드의 진행률 표시 줄, CSS 단계 메뉴, 겹치는 메뉴 등과 같은 목록 요소에 대한 다른 많은 응용 프로그램이 있습니다. 나는 여기에 하나씩 보여주지 않을 것입니다.

HTML 태그 요소는 벽돌과 타일로 매우 평범한 것처럼 보이지만 훌륭한 디자이너와 우수한 작업자와 관련하여 무한한 잠재력과 매력을 가해 화려한 인터넷을 가지고 있습니다. 목록 요소에 대해서도 마찬가지입니다. 이 기사에는 논의 할 수있는 수십 가지 더 많은 용도와 기술이 있지만,이 기사에 나와있는 것들 중 일부는 HTML의 목록 태그 요소 개요에 대한 철저한 이해를 제공하여 목록과 같은 벽돌로 아름다운 인터넷 건물을 건설 할 수 있도록 도와줍니다.

• Listamatic

• CSS 설계 : 길들이기 목록

• CSS는 W3Schools에 나열됩니다

• 정의 목록 - 오용 또는 오해?

• CSS 스타일 목록 : 20+ 데모, 튜토리얼 및 모범 사례

• SitePoint의 HTML 참조에 요소를 나열합니다