IE에서 지원하지 않는 실용적이고 일반적으로 사용되는 10가지 CSS 속성

IE 브라우저, 특히 IE6에 대한 불만은 기본적으로 마비 상태에 빠졌습니다. 때로는 매우 부정적인 생각까지 합니다. 브라우저가 IE6뿐이라도 세상에 브라우저가 하나만 있으면 좋겠다는 생각이 들 때도 있습니다. 물론 그러한 생각은 매우 병적이므로 즉시 포기하십시오. 이 기사에서는 매우 현실적이지만 IE에서 지원하지 않는 10가지 CSS 속성을 소개합니다. 이러한 속성을 나열하는 것은 IE를 비판하는 것이 아니지만(비판하는 것은 쓸모가 없습니다) 어떤 CSS 속성이 IE에서 지원되지 않는지 이해하는 것이 좋습니다. . 타겟 방식으로 CSS와 Hack을 작성해 봅시다.

1.개요

CSS 문제를 디버깅할 때 해당 요소에 무슨 일이 일어나는지 정확히 확인하고 문제의 원인을 파악하는 데 도움이 되도록 특정 요소에 테두리를 추가하는 경우가 많습니다. 이는 레이아웃에 대한 보다 구체적인 가시성을 제공하기 때문에 종종 효과적입니다. 그러나 블록 수준 요소인 경우 문제가 발생할 수 있습니다. 블록 수준 요소에 1px 테두리를 추가하면 레이아웃에 영향을 미칠 수 있으며, 이로 인해 요소 너비가 추가로 2px 늘어납니다.

개요 속성은 문서의 흐름에 영향을 주지 않고 개체를 렌더링하므로 완벽한 대체 속성입니다. 하지만 IE6, IE7에서는 개요 속성을 지원하지 않으므로 두 브라우저에서는 디버깅에 사용할 수 없습니다.

2. 상속(값)

CSS 개발에는 이에 대한 많은 예가 있습니다. 특정 요소에 특정 스타일을 설정하여 해당 요소가 상위 요소의 추가된 모든 속성을 "상속"하도록 지시하면 상당한 양의 키보드 입력을 피할 수 있습니다.

상속을 설정하면 쉽게 달성할 수 있습니다. 이것은 유용할 수 있습니다. 예를 들어 배경 속성을 재정의할 때 속성(색상, 이미지 URL, 위치 등)에 많은 텍스트가 포함되는 경우가 많습니다. 따라서 이러한 값을 다시 작성하는 대신 문제의 요소가 상위 요소와 동일한 배경 속성을 가지기를 원할 수 있으며 상속 값이 트릭을 수행할 것입니다. 즉, 많은 키보드 입력을 확실히 절약할 수 있습니다.

아쉽게도 IE6, IE7에서는 상속값이 지원되지 않습니다(방향(텍스트 방향) 및 가시성 속성 제외).

누군가는 코드가 여자의 치마와 같다고 말했습니다. 짧을수록 IE는 우리의 소망을 실현하는 데 방해가 될 것 같습니다.

3. 빈 셀

이 속성은 "display" 속성이 "table-cell"로 설정된 테이블이나 요소에만 사용됩니다. 테이블에 내용을 동적으로 추가하는 경우 특정 셀의 내용이 비어 있는 상황이 발생할 수 있으며, 이 빈 셀의 테두리, 배경색, 배경 이미지 등을 숨기고 싶지 않습니다.

"빈 셀: 숨기기"를 사용하면 이 문제를 해결할 수 있으며, 이렇게 하면 이러한 상황이 발생할 수 있는 셀을 완전히 숨길 수 있습니다.

Internet Explorer는 빈 셀 속성을 지원하지 않습니다.

4. 캡션쪽

테이블 속성에 대해 말하자면, 이 속성은 테이블의 측면 열에 표시되는 테이블 제목을 선언하는 데 사용됩니다. 위쪽, 아래쪽, 왼쪽, 오른쪽의 네 가지 값을 허용합니다. Internet Explorer는 이 속성을 지원하지 않으며 IE6 및 IE7에서는 표 제목이 항상 표 상단에 나타납니다.

5. 카운터 증가/카운터 재설정

순서가 있는 목록(

)은 수동으로 숫자를 증가시키는 수고를 덜고 숫자를 변경하지 않고도 목록의 순서를 변경할 수 있으므로 매우 편리합니다.

CSS에는 카운터 증가 및 카운터 재설정 속성이 있어 순서가 지정된 목록과 유사하게 거의 모든 HTML 요소에서 자동으로 증가하는 숫자를 생성할 수 있습니다.

예는 다음과 같습니다.

h2 {counter-increment: headers;}
h2:before {content: counter(headers) ". ";}

위 스타일은 모든 c1a436a314ed609750bd7c7d319db4da 태그 앞에 증분 숫자를 자동으로 추가하고 h2 태그에서 li 태그와 동일한 효과를 얻을 수 있도록 해줍니다.

그러나 IE6, IE7 및 Safari(버전 3.x까지)에서는 이러한 속성을 지원하지 않습니다. 물론 IE6은 :before 의사 요소도 지원하지 않습니다.

6. 최소키

때로는 웹 사이트의 디자인이나 레이아웃 구조에 고정된 높이의 콘텐츠 영역이 필요한 경우가 있습니다. 그렇지 않으면 특정 시각적 효과가 손실됩니다. 이는 그라데이션 배경, 고유한 드롭다운 목록 때문일 수도 있고 Photoshop에서 제공되는 멋진 글로우 효과 때문일 수도 있습니다. 그런데 페이지에 내용이 많은데도 페이지가 예상대로 확장되지 않는 경우가 있습니다.

이때 min-height 속성을 사용해야 합니다. 콘텐츠의 실제 높이가 이 최소 높이에 도달하는지 여부에 관계없이 특정 블록 수준 요소의 최소 높이를 렌더링하도록 브라우저에 지시할 수 있기 때문입니다. 그런 다음 콘텐츠가 최소 높이를 초과하면 요소가 적절하게 확장됩니다.

min-height 사용에 관해 주의할 점은 IE6에서는 지원되지 않는다는 것입니다. 우리 모두는 IE6가 (천천히) 사라지고 있다는 것을 알고 있지만 일부 고객은 여전히 ​​자신의 사이트에서 해당 브라우저를 지원하도록 요구할 수 있습니다.

그러나 좋은 소식은 IE6이 다른 브라우저가 "최소 높이"를 렌더링하는 방식과 정확히 동일하게 높이 값을 렌더링하므로 특정 높이를 추가하려면 IE6 전용 해킹이나 별도의 스타일시트만 필요하며 문제가 해결된다는 것입니다.

IE6은 또한 min-width , max-height 및 max-width 를 무시하지만 위의 방법은 이러한 속성에도 가능합니다.

7. :hover

从技术上来说，:hover只是一个伪类，但是它在IE6中不被支持（IE7和IE8支持）。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用，可以避免(至少在某种程度上)使用javascript。

但是如果你的网站，需要完全支持IE6，特别是在中国这种IE6一手遮天的情况下，那么你就必须考虑取消使用这个伪类，除非相关的标签有个”href”属性，比如3499910bf9dac5ae3c52d5ede7383485标签。而且如果要实现这种效果，可能必须借助于javascript和额外的样式。

8. Display

Display 通常被设置为这三个值中的一个： block、inline和 none。“得益于”IE，Display的其它值很少被用到。这些值包括 inline-block、table、inline-table和table-cell等，这些属性对于解决一些特殊的布局问题时，是很有用的。

所以，尽管IE 确实支持Display的这三个基本属性，但是它基本上不支持其它属性。

其实，IE8对display的属性支持已经相当完整了。不过，对于inline-block属性，IE6/7只支持本身为inline的元素。

9. Clip

这是一个在特殊情况下能派上用场的很有趣的CSS属性。它可能和不可预知的、动态生成的内容结合起来。简单来说，这个属性允许你在一个特定的元素上 指定隐藏区域——也可以理解为，在一个绝对定位的元素中，按照一定的设置来裁剪该元素的显示区域，超出该区域的内容会被隐藏掉。语法看起来像这样的：

p.clipped {
         padding: 20px;
         width: 400px;
         height: 400px;
         clip: rect(20px, 300px, 200px, 100px);
         position: absolute;
}

修剪只能用于一个绝对定位的元素，而且只用使用矩形区域。括号内的数字划出的区域(200px*180px大小)为可见区域，该区域以外的内容不可见或者被剪切掉。

技术上来讲， clip 属性被IE支持，但是只支持无逗号的语法，比如

p.clipped {
	padding: 20px;
	width: 400px;
	height: 400px;
	clip: rect(20px 300px 200px 100px);
	position: absolute;
}

上面的样式（rect后面括号里的属性没有用逗号隔开）在大多数浏览器下都可运行，但是可能不会通过CSS验证，因为语句没有用逗号隔开。

10. :focus

这是另外一个伪类需要在这里被提及的，因为所有的非IE浏览器，都支持这个属性。:focus伪类允许你声明一个特别的样式，当一个页面元素成为键 盘(鼠标)焦点的时候，将该样式动态的应用到该元素上。这在表单元素上非常有用，因为你可以在一个输入框被选中的时候给它添加一个边框。

下面的样式将在输入框成为键盘焦点的时候添加一个红色的边框：

input:focus {
        border: 1px solid #f00;
}

               

위 내용은 IE에서 지원하지 않는 실용적이고 일반적으로 사용되는 10가지 CSS 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!