css 产生huck,10 Useful CSS Properties Not Supported By Internet Explorer

NOTE: This is an older article that targets IE6 and IE7. IE8 now supports many of the properties and property values listed below.

In a previous article I described 10 useful, cross-browser, CSS properties that might often be forgotten, but can really come in handy in specific situations where a solution is needed.

But not all CSS property names are that friendly. In this post, I’ll describe 10 properties that can be quite useful but have little or no support in Internet Explorer.

1. Outline

Often during the debugging of a CSS issue, I’ll put borders on specific elements to see exactly what’s going and help determine the source of the problem. This usually helps, as it gives me a more specific visual of the layout, which otherwise may be hidden. But if block-level elements with specific widths and heights are at fault, adding a 1 pixel border around any of those elements will affect the layout, making the bordered elements 2 pixels wider/taller.

The outline property is the perfect replacement, because it outlines an object without affecting the document flow. But Internet Explorer versions 6 and 7 do not support the outline property, so it cannot be used to debug issues that are specific to those browsers.

2. Inherit (value)

There are many instances in CSS development where you can avoid quite a few keystrokes by overriding specific styles set on a particular element by telling that element to “inherit” the styles of its parent for any given property.

This is easily accomplished by giving a property the value of inherit. This could come in handy, for example, when overriding the background property, which will often have quite a bit of text in it (a color value, a url pointer, position, etc). So, instead of having to rewrite those values, you may just want the element in question to have the same background as its parent. A value of inherit will accomplish this, potentially saving some keystrokes.

Unfortunately, the value inherit is not supported in IE6 and IE7 except when used for the direction and visibility properties.

3. Empty-Cells

This property only applies to table elements, or elements that have their display property set to table-cell. If you’re populating a table dynamically, there could be an instance where a particular table cell has no content and you may not want the borders, background color, or background image on the empty cell to be visible.

Use empty-cells: hide, and this will resolve this problem for any table where this could potentially occur, hiding the empty cells.

Internet Explorer does not support use of the empty-cells property.

4. Caption-Side

On the subject of table properties, this property is used to declare what side of a table a table’s caption is displayed on. It accepts values of top, bottom, left, and right. Internet Exporer does not support the use of this property, so the table’s caption will always appear at the top in versions 6 and 7 of that browser.

5. Counter-Increment / Counter-Reset

Ordered lists are very handy, because they save you the trouble of manually entering incrementing numbers on lists of items, and they allow you to change the order of the items without having to change the numbers.

CSS includes the counter-increment and counter-reset properties, which allow you to apply automatically generated incrementing numbers to virtually any set of HTML elements, similar to how ordered lists produce generated numbers.

Here is an example:

h2 {

counter-increment: headers;

}

h2:before {

content: counter(headers) ". ";

}

The above CSS will add an automatically incrementing number before all

tags on the page, allowing you to have the same flexibility on your

tags as you would on the

elements inside of an ordered list.

But IE6, IE7 and even Safari (up to version 3) do not support the use of these properties.

6. Min-Height

Sometimes, the design or layout structure of a site requires that the content area be a specific height, at the least, otherwise the intended visual effect is lost. This can be due to a gradient background, a unique drop shadow, or possibly a lighting effect done in Photoshop. But sometimes content on one or two pages is small, and the page doesn’t expand as required.

This is where the min-height property comes in handy, because it tells the browser to render a particular block-level element to a minimum height, regardless of actual content. Then, if the content is larger than the minimum height, the element will expand accordingly.

The only caution with min-height is that it has no support in IE6. We all know IE6 is (slowly!) on the way out, but a client may still require that their site be operational in that browser version.

Happily, IE6 renders the height value the same way that other browsers render “min-height”, so all you need is an IE6-only hack or separate stylesheet that applies a specified height to the element, and the problem is solved.

IE6 also ignores min-width, max-height and max-width, but no easy workarounds are available.

7. :hover

Technically, :hover is a pseudo-class, but is worth mentioning because of its limited support in IE6. The :hover pseudo-class allows you to apply different styles to elements when the mouse is moved over them. This can be quite useful, avoiding the need (in some instances) to use JavaScript or CSS Sprites for rollover effects.

But if the site you’re developing requires full support in IE6, then you will want to avoid using hover on anything except an tag that has an href attribute.

8. Display

Display is usually used when setting one of three values: block, inline, and none. Thanks to Internet Explorer, other useful values for the display property are rarely used. Those values include inline-block, table, inline-table, and table-cell — each of which could come in handy to resolve specific layout issues.

So, although IE does support the three basic values for display, it provides little or no support for the others.

9. Clip

This is an interesting CSS property that could come in handy in a specific situation, possibly in conjunction with dynamically generated content, which can be unpredictable. Basically, this property allows you to specify invisible areas on a particular element. The syntax looks like this:

div.clipped {

padding: 20px;

width: 400px;

height: 400px;

clip: rect(20px, 300px, 200px, 100px);

position: absolute;

}

Clipping can only be used on an absolutely positioned element, and can only use the rectangle shape. The dimensions provided inside the parentheses create the “visible” area, making everything inside the element that falls outside those dimensions invisible, or “clipped”.

Technically, the clip property is supported by IE, but only when you use comma-less syntax for the dimensions, like this:

div.clipped {

padding: 20px;

width: 400px;

height: 400px;

clip: rect(20px 300px 200px 100px);

position: absolute;

}

The above CSS will work across most browsers, but will not qualify as valid CSS, as the syntax without commas is deprecated.

10. :focus

This is another pseudo-class that deserves mention on this list due to the fact that it is fully supported in every browser except Internet Explorer. The :focus pseudo-class allows you to declare specific styles to apply dynamically to a page element when that element receives keyboard focus. This can be useful on a form, as you can add a border to an input element when it is selected, or “focused” by the user.

The following code will add a red border to an input element that is given keyboard focus:

input:focus {

border: solid 1px #f00;

}

That’s it for this list, I hope you enjoyed it. I certainly learned a lot while researching this information, so I hope it helped you as well.