10 CSS properties that are useful and common but not supported by IE

The complaints about IE, especially IE6, have been paralyzed, and occasionally even a very negative idea: the world has only one browser, even if the only browser is IE6. Of course, such an idea is very morbid, immediately dismissed. In this article, introduced 10 very real but IE does not support the CSS properties, listed these properties is not to grumble IE (grumble also useless), but you understand which CSS properties is IE does not support, more targeted to write CSS and hack.

1. Outline

When debugging CSS problems, I often add border on the specified element to see exactly what happens to that element and help identify the source of the problem. This is often effective because it gives me more specific visibility on the layout. However, if this is a block-level element, some errors may occur-adding a 1px border to any block-level element will likely affect the layout, which will add an additional 2px to the width of the element.

The Outline property is a perfect substitute because it can render the object without affecting the flow of the document. However, IE6 and IE7 do not support the outline property, so it cannot be used for debugging in both browsers.

2. Inherit (value)

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

This can be done easily by setting the inherit. This may be useful. For example, when overriding the background attribute, there will often be a lot of text in that attribute (color, URL address, location, etc.) of the image. So, instead of re-writing these values, you might just want to consider that the elements in the element and their parent elements have the same background properties, and a inherit value can handle everything-which obviously saves the keyboard input significantly.

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

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

3. Empty-cells

This property is used only for elements that have a table or "display" property set to "Table-cell". If you dynamically add content to a table, you may experience the empty contents of a cell, and then you don't want the empty cell's border, background color, background image, etc. to be hidden.

Using "Empty-cells:hide" solves this problem, and it hides the cells that might be in this situation altogether.

Internet Explorer does not support the Empty-cells property.

4. Caption-side

When it comes to table properties, this property is used to declare the table headings that appear in the sidebar of the table. It accepts top, bottom, left, and right four values. Internet Exporer does not support this property, and table headings will always appear at the top of the table in IE6 and IE7.

5. Counter-increment/counter-reset

The sequence list (<ol>) is handy because it saves you the hassle of adding incremental numbers manually, and it allows you to change the sequence of the list without changing the numbers.

CSS has the Counter-increment and Counter-reset properties, which allow you to automatically generate incremental numbers to almost any HTML element, just like the effect of a sequence list.

Here's an example:

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

The above style will automatically add incrementing numbers before all

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

6. Min-height

Sometimes, a site's design or layout structure requires a fixed height content area, otherwise the specific visual effect will be discarded. This may be due to a gradient background, a unique drop-down list, or perhaps because of the cool glow effect of PS. Sometimes, however, the content in the page is more, and the page does not unfold as expected.

The Min-height attribute is needed at this time because it tells the browser to render the smallest height on a particular block-level element, regardless of the actual height of the content. Then, if the content exceeds the minimum height, the element will expand moderately.

The only thing to notice when using min-height is that it is not supported in IE6. We all know that IE6 is (slowly) exiting the historical stage, but some customers may still ask their website to support this damned browser.

Happily, though, IE6 renders the value of height exactly the same way as other browsers render "Min-height", so you only need a hack or stand-alone style sheet for IE6 to add a specific height to that element, which solves the problem.

IE6 also ignores Min-width, Max-height, and Max-width, but the above methods are also feasible on these attributes.

7.: hover

Technically,: hover is just a pseudo-class, but it is not supported in IE6 (IE7 and IE8 support). : The hover pseudo-class allows you to add any mouse-over style to the element. This is useful to avoid (at least in some ways) using JavaScript.

But if your site needs to fully support IE6, especially in the case of IE6 hoodwink in China, then you have to consider canceling the use of this pseudo-class unless the associated tag has an "href" attribute, such as a <a> tag. And if you want to do this, you might have to use JavaScript and extra styles.

8. Display

Display is usually set to one of these three values: block, inline, and none. The other values of the ie,display are seldom used, thanks to the. These values include inline-block, table, inline-table, and Table-cell, which are useful for solving some special layout problems.

So, although IE does support these three basic properties of display, it basically does not support other properties.

In fact, IE8 's property support for display is quite complete. However, for the Inline-block property, IE6/7 only supports elements that are inline.

9. Clip

This is a very interesting CSS property that can be useful in special situations. It may be combined with unpredictable, dynamically generated content. In short, this property allows you to specify a hidden area on a particular element-or, in an absolutely positioned element, to crop the display area of the element in a certain setting, and the content beyond that area is hidden. The syntax looks like this:

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

Pruning can only be used on an absolutely positioned element, and only with rectangular areas. The area (200px*180px size) of the number in parentheses is the visible area, and the content outside of the area is not visible or cut off.

Technically, the clip attribute is supported by IE, but it supports no comma-only syntax, such as

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

The above style (the attributes in parentheses after rect are not separated by commas) can be run under most browsers, but may not be validated by CSS because the statements are not separated by commas.

Ten.: Focus

This is another pseudo-class that needs to be mentioned here, because all non-IE browsers support this property. : The focus pseudo-class allows you to declare a particular style that is applied dynamically to the element when a page element becomes the focus of the keyboard (mouse). This is useful on form elements because you can add a border to an input box when it is selected.

The following style adds a red border when the input box becomes the keyboard focus:

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