Ten practical and commonly used CSS properties that are not supported by IE

Complaints about IE browsers, especially IE6, have basically entered a state of paralysis. Occasionally, they even have very negative thoughts: It would be nice if there was only one browser in the world, even if the only browser is IE6. Of course, such an idea is very morbid, so give it up immediately. In this article, we introduce 10 CSS properties that are very real but not supported by IE. Listing these properties is not to criticize IE (it is useless to criticize), but it is better if you understand which CSS properties are not supported by IE. Let’s write CSS and Hack in a targeted manner.

1. Outline

When debugging CSS issues, I often add a border to a specific element to see exactly what happens to that element and help determine the source of the issue. This often works because it gives me more specific visibility on the layout. But if it's a block-level element, something might go wrong - adding a 1px border to any block-level element is likely to affect the layout, making it an additional 2px wider.

The outline property is a perfect replacement because it renders the object without affecting the flow of the document. However, IE6 and IE7 do not support the outline attribute, so it cannot be used for debugging in these two browsers.

2. Inherit (value)

There are many examples of this in CSS development: by setting certain styles on a specific element to tell that element to "inherit" all the added properties of its parent element, you can avoid a considerable amount of keyboard input.

This can be easily achieved by setting inherit. This may be useful. For example, when overriding the background attribute, there is often a lot of text in the attribute (color, image URL, location, etc.). So, rather than rewriting these values, you might just want the element in question to have the same background property as its parent, and an inherit value will do the trick - obviously saving a lot of keyboard typing.

Unfortunately, inherit values ​​are not supported in IE6 and IE7 (except for the direction (text direction) and visibility properties).

Someone said that code is like a woman's skirt - the shorter the better, it seems that IE will hinder the realization of our wish.

3. Empty-Cells

This attribute is only used for table or elements whose "display" attribute is set to "table-cell". If you dynamically add content to a table, you may encounter a situation where the content of a certain cell is empty, and you do not want the border, background color, background image, etc. of this empty cell to be hidden.

Using "empty-cells: hide" can solve this problem, which will completely hide the cells where this situation may occur.

Internet Explorer does not support the empty-cells attribute.

4. Caption-Side

Talking about the table attribute, this attribute is used to declare the table title that is displayed in the side column of the table. It accepts four values: top, bottom, left and right. Internet Exporer does not support this attribute, the table title will always appear at the top of the table in IE6 and IE7.

5. Counter-Increment / Counter-Reset

An ordered list (

) is very convenient because it saves you the trouble of manually adding incrementing numbers, and it allows you to change the sequence of the list without changing the numbers.

CSS has counter-increment and counter-reset properties, which allow you to automatically generate incrementing numbers on almost any HTML element, similar to an ordered list.

Here is an example:

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

The above style will automatically add an incrementing number in front of all

tags, and allows you to achieve the same effect on h2 tags as li tags.

But IE6, IE7 and even Safari (until version 3.x) do not support these properties. Of course, IE6 also does not support the :before pseudo-element.

6. Min-Height

Sometimes the design or layout structure of a website requires a content area with a fixed height, otherwise a certain visual effect is lost. This might be because of a gradient background, a unique drop-down list, or maybe because of a cool glow effect that comes out of Photoshop. But sometimes, there is a lot of content in the page, but the page cannot be expanded as expected.

At this time, you need to use the min-height attribute, because it can tell the browser to render the minimum height on a specific block-level element, regardless of whether the actual height of the content reaches this minimum height. Then, if the content exceeds the minimum height, the element will expand appropriately.

The only thing to note about using min-height is that it is not supported in IE6. We all know that IE6 is (slowly) dying out, but some customers may still demand that their sites support the damn browser.

The good news is that IE6 renders the height value exactly the same way other browsers render "min-height", so all you need is an IE6-specific hack or a separate stylesheet to add specific height , the problem is solved.

IE6 also ignores min-width , max-height and max-width , but the above method is also feasible for these properties.

7. :hover

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

但是如果你的网站，需要完全支持IE6，特别是在中国这种IE6一手遮天的情况下，那么你就必须考虑取消使用这个伪类，除非相关的标签有个”href”属性，比如标签。而且如果要实现这种效果，可能必须借助于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;
}

               

The above is the detailed content of Ten practical and commonly used CSS properties that are not supported by IE. For more information, please follow other related articles on the PHP Chinese website!