Ten practical CSS attributes that are not supported by IE, and ten ie do not support css

Ten practical CSS attributes that are not supported by IE, and ten ie do not support css

Complaints about Internet Explorer, especially Internet Explorer 6, are almost paralyzed. Occasionally, there is even a very negative idea: there is only one browser in the world, even if the only browser is Internet Explorer 6. Of course, this idea is very pathological and immediately dispelled. This article introduces 10 CSS attributes that are very real but not supported by IE. Listing these attributes is not intended to count IE (it is useless to count ), but you know which CSS attributes are not supported by IE, so you can write CSS and Hack more specifically.

1. Outline

When debugging CSS problems, I often add border on the specified element to precisely view what happens to the element and help determine the source of the problem. This is often effective because it gives me more specific visibility on the board. However, if it is a block-level element, this may cause some errors-adding a 1px border to any block-level element may affect the layout, it will increase the width of this element by 2px.

The outline attribute is a perfect alternative because it can present the object without affecting the Document Stream. However, IE6 and IE7 do not support the outline attribute. Therefore, they cannot be used for debugging in these two browsers.

2. Inherit (value)

There are many examples in CSS development: by setting certain styles on a specific element, the element is told to "inherit" all the added attributes of its parent element, in this way, you can avoid a lot of keyboard input.

This can be easily implemented by setting inherit. This may be useful. For example, when you override the background attribute, there are often a lot of text in this attribute (color, image URL, location, etc ). Therefore, instead of re-writing these values, you may only want to consider the element with the same background attribute as its parent element, an inherit value can handle everything-This obviously saves a lot of keyboard input.

Unfortunately, the inherit values in IE6 and IE7 are not supported (except for the direction (Text direction) and visibility attributes ).

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

3. Empty-Cells

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

You can solve this problem by using "empty-cells: hide", which completely hides cells that may cause this situation.

Internet Explorer does not support the empty-cells attribute.

4. Caption-Side

When it comes to the table attribute, this attribute is used to declare the table title displayed in the column of the table. It accepts the top, bottom, left, and right values. 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

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

CSS has the counter-increment and counter-reset attributes, which allow you to automatically generate incremental numbers to almost all html elements, just like the effect of an ordered list.

Here is an example:

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

The above style will automatically add an increasing number before all the

However, IE6, IE7, and Safari (until version 3.x) do not support these attributes. Of course, IE6 does not support the before pseudo element.

6. Min-Height

Sometimes, the design or layout of a website requires a content area with a fixed height, otherwise the specific visual effects will be lost. This may be because of a gradient background, a unique drop-down list, or the cool luminous effect of PS. However, sometimes there will be more content on the page, but the page cannot be expanded as expected.

At this time, the min-height attribute is used, because it tells the browser to render the smallest height on a specific block-level element, regardless of whether the actual height of the content has reached this minimum height. Then, if the content exceeds the minimum height, the element will be moderately expanded.

Note that min-height is not supported in ie6. We all know that IE6 is exiting the historical stage (SLOWLY), but some customers may still require their website to support this damn browser.

Fortunately, IE6 renders the height value in the same way as other browsers render "min-height, therefore, you only need a hack or independent style sheet for IE6 to add a specific height for the element. This problem is solved.

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

7.: hover

Technically speaking, hover is only a pseudo-class, but it is not supported in IE6 (IE7 and IE8 ). : The hover pseudo class allows you to add any mouse style on the element. This is very useful to avoid using javascript (at least to some extent.

However, if your website needs to fully support Internet Explorer 6, especially in the case that Internet Explorer 6 is in the Chinese market, you must consider canceling the use of this pseudo class, unless the related tag has an "href" attribute, such as <a> tag. To achieve this effect, javascript and additional styles may be required.

8. Display

Display is usually set to one of the three values: block, inline, and none. Benefiting from IE, other values of Display are rarely used. These values include inline-block, table, inline-table, and table-cell. These attributes are useful for solving some special layout problems.

Therefore, although IE does support the three basic attributes of Display, it basically does not support other attributes.

In fact, the display attribute support for IE8 is already quite complete. However, for the inline-block attribute, IE6/7 only supports the inline element.

9. Clip

This is an interesting CSS attribute that can be used in special cases. It may be combined with unpredictable and dynamically generated content. To put it simply, this attribute allows you to specify a hidden area on a specific element-it can also be understood as, in an absolute positioning element, crop the display area of the element according to certain settings. content beyond the area will be hidden. The syntax looks like this:

1234567

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

Trim can only be used for an absolute positioning element, and only a rectangular area is used. The area (200px * 180px size) drawn by a number in parentheses is visible, and the content outside the area is invisible or cut out.

Technically speaking, clip attributes are supported by IE, but only the syntax without commas is supported, such

1234567

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

The preceding style (the attributes in the rect brackets are not separated by commas) can be run in most browsers, but it may not pass CSS verification because the statements are not separated by commas.

10.: focus

This is another pseudo class that needs to be mentioned here, because all non-ie browsers support this attribute. : The focus pseudo class allows you to declare a special style. When a page element becomes the focus of a key disk (Mouse), the style is dynamically applied to the element. This is useful for form elements, because you can add a border to an input box when it is selected.

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

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