1. 개요 위의 스타일 (ERCK 후 괄호 안의 속성은 쉼표로 분리되지 않음) 대부분의 브라우저에서 실행될 수 있지만 문이 쉼표로 분리되지 않기 때문에 CSS 확인을 통과하지 못할 수 있습니다.
CSS 문제를 디버깅 할 때 종종 지정된 요소에 테두리를 추가하여 요소에 어떤 일이 발생하는지 정확하게 확인하고 문제의 원인을 결정하는 데 도움이됩니다. 이것은 레이아웃에서보다 구체적인 가시성을 제공하기 때문에 종종 효과적입니다. 그러나 블록 레벨 요소 인 경우 일부 오류가 발생할 수 있습니다. 1px 테두리를 모든 블록 레벨 요소에 추가하면 레이아웃에 영향을 미치 므로이 요소의 너비에 추가 2px가 추가됩니다.
개요 속성은 문서 흐름에 영향을 미치지 않고 객체를 렌더링하기 때문에 완벽한 대안입니다. 그러나 IE6 및 IE7은 개요 속성을 지원하지 않으므로 두 브라우저에서 디버깅에 사용할 수 없습니다.
2. 상속 (값)
CSS 개발에는 많은 예가 있습니다. 특정 요소에 특정 스타일을 설정하여 부모 요소의 모든 추가 특성을 "상속"하므로 많은 키보드 입력을 피할 수 있습니다.
이것은 상속을 설정하여 쉽게 달성 할 수 있습니다. 이것은 유용 할 수 있습니다. 예를 들어, 배경 속성을 다시 작성할 때 종종 속성 (색상, URL 주소, 위치 등)에는 많은 텍스트가 있습니다. 따라서 이러한 값을 다시 작성하는 대신 프로세스의 요소가 부모 요소와 동일한 배경 속성을 가지고 있다고 생각할 수도 있습니다. 상속 값은 모든 것을 수행 할 수 있습니다. 이는 키보드 입력을 많이 저장합니다.
불행히도, 상속 값은 IE6 및 IE7 (방향 (텍스트 방향) 및 가시성 속성 제외)에서 지원되지 않습니다.
3. 빈 셀
이 속성은 테이블 또는 "디스플레이"속성이 "테이블 세포"로 설정된 요소에만 사용됩니다. 테이블에 콘텐츠를 동적으로 추가하면 셀의 빈 내용이 발생할 수 있으며 빈 셀이 숨겨지기를 원하지 않습니다.
"빈 셀을 사용하면 : 숨기기"는이 문제를 해결할 수 있으며,이 문제는 발생할 수있는 셀을 완전히 숨길 수 있습니다.
Internet Explorer는 빈 셀 속성을 지원하지 않습니다.
4. 캡션 측
테이블 속성에 대해 말하면,이 속성은 테이블의 사이드 바에 표시된 테이블 제목을 선언하는 데 사용됩니다. 상단, 하단, 왼쪽 및 오른쪽의 네 가지 값을 수락합니다. 인터넷 수출 업체는이 속성을 지원하지 않으며 테이블의 제목은 항상 IE6 및 IE7의 테이블 상단에 나타납니다.
5. 카운터 증가 / 카운터 리셋
주문한 목록 (<ol>)은 증분 숫자를 수동으로 추가하는 번거 로움을 절약하기 때문에 매우 편리하며 숫자를 변경하지 않고 목록 시퀀스를 변경할 수 있습니다.
CSS에는 카운터 증가 및 카운터 리셋 속성이있어서 주문 목록의 효과와 마찬가지로 거의 모든 HTML 요소에 증분 숫자를 자동으로 생성 할 수 있습니다.
그러나 IE6, IE7 및 SAFARI (버전 3.X까지)는 이러한 특성을 지원하지 않습니다. 물론, IE6은 지원하지 않습니다 : 의사 요소 전에.
6. Min-Height
때로는 웹 사이트의 설계 또는 레이아웃에는 고정 된 높이가있는 콘텐츠 영역이 필요합니다. 그렇지 않으면 특정 시각적 효과가 손실됩니다. 이는 그라디언트 배경, 고유 드롭 다운 목록 때문일 수도 있고 PS의 멋진 글로우 효과로 인한 것일 수 있습니다. 그러나 때로는 페이지에 많은 내용이 있지만 페이지는 예상대로 확장 할 수 없습니다.
이 시점에서는 최소값 속성을 사용해야합니다. 브라우저는 콘텐츠의 실제 높이 가이 최소 높이에 도달하는지 여부에 관계없이 브라우저에 특정 블록 레벨 요소에서 최소 높이를 렌더링하도록 지시 할 수 있기 때문입니다. 그런 다음 내용이 최소 높이를 초과하면 요소가 적당히 확장됩니다.
Min-Height로 주목해야 할 유일한 것은 IE6에서 지원되지 않는다는 것입니다. 우리는 모두 IE6이 역사의 단계를 빠져 나가고 있다는 것을 알고 있지만 일부 고객은 여전히 웹 사이트 에이 망할 브라우저를 지원하도록 요청할 수 있습니다.
그러나 IE6은 다른 브라우저가 "최소 높이"를 렌더링하는 것과 같은 방식으로 높이의 가치를 렌더링하는 것이 좋습니다. 따라서 IE6에 대한 해킹 또는 독립적 인 스타일 시트 만 있으면 해당 요소에 특정 스타일이 필요합니다.
IE6은 또한 최소 폭, 최대 높이 및 최대 폭을 무시하지만 위의 방법은 이러한 특성에서도 가능합니다.
7. : 호버
기술적으로 : 호버는 의사 급이지만 IE6 (IE7 및 IE8에서 지원)에서는 지원되지 않습니다. : 호버 의사 클래스를 사용하면 마우스 스타일을 요소에 추가 할 수 있습니다. 이것은 매우 유용하며 JavaScript를 사용하여 (적어도 어느 정도) 피할 수 있습니다.
그러나 웹 사이트가 IE6, 특히 IE6가 전력으로 가득 찬 중국에서 IE6를 완전히 지원 해야하는 경우 관련 태그에 <a> 태그와 같은 "HREF"속성이없는 한이 의사 클래스의 사용을 취소하는 것이 좋습니다. . 이 효과를 달성하려면 JavaScript 및 추가 스타일을 사용해야 할 수도 있습니다.
8. 디스플레이
디스플레이는 일반적 으로이 세 가지 값 중 하나 인 블록, 인라인 및 없음으로 설정됩니다. "IE 덕분에 다른 디스플레이 값은 거의 사용되지 않습니다. 이러한 값에는 인라인 블록, 테이블, 인라인 테이블 및 테이블 셀이 포함됩니다.
따라서 IE는이 세 가지 기본 디스플레이 속성을 지원하지만 기본적으로 다른 속성을 지원하지 않습니다.
실제로, IE8의 디스플레이에 대한 속성 지원은 매우 완전합니다. 그러나 인라인 블록 속성의 경우 IE6/7은 인라인 자체의 요소 만 지원합니다.
다양한 브라우저에서 Display의 지원에 대한 자세한 내용은이를 참조하십시오 - Shenfei Note
9. 클립
이것은 특별한 경우에 편리한 흥미로운 CSS 속성입니다. 예측할 수없는 동적으로 생성 된 컨텐츠와 결합 될 수 있습니다. 간단히 말해서,이 속성은 특정 요소에 숨겨진 영역을 지정할 수 있습니다. 절대적으로 위치 된 요소에서도 이해할 수 있으며, 요소의 디스플레이 영역은 특정 설정에 따라 절단되며 해당 영역 이외의 내용은 숨겨져 있습니다.
기술적으로 말하면, 클립 속성은 IE에 의해 지원되지만 다음과 같은 쉼표가없는 구문 만 지원합니다.
Div.clipped {
패딩 : 20px;
너비 : 400px;
높이 : 400px;
클립 : rect (20px 300px 200px 100px);
위치 : 절대;
}
10. : 초점
이것은 모든 비 EI 브라우저 가이 속성을 지원하기 때문에 여기에 언급 해야하는 또 다른 의사 클래스입니다. : Focus Pseudo-Class를 사용하면 페이지 요소가 키보드 (마우스)의 초점이되면 스타일이 요소에 동적으로 적용됩니다. 선택할 때 입력 상자에 테두리를 추가 할 수 있기 때문에 양식 요소에 매우 유용합니다.