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 by making the element 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).
3. Empty-Cells
This attribute is only used for tables 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 (<ol>) 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 the counter-increment and counter-reset properties, which allow you to automatically generate incrementing numbers on almost any HTML element, similar to an ordered list.
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 standalone 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
Technically, :hover is just a pseudo-class, but it is not supported in IE6 (IE7 and IE8 support it). The :hover pseudo-class allows you to add any mouseover style to an element. This is very useful and avoids (at least to some extent) the use of JavaScript.
But if your website needs to fully support IE6, especially in China where IE6 dominates the sky, then you must consider canceling the use of this pseudo-class, unless the relevant tag has a "href" attribute, such as the <a> tag . And if you want to achieve this effect, you may have to resort to javascript and additional styles.
8.Display
Display is usually set to one of these three values: block, inline, and none. "Thanks" to IE, other values of Display are rarely used. These values include inline-block, table, inline-table and table-cell, etc. These attributes are very useful for solving some special layout problems.
Therefore, although IE does support these three basic properties of Display, it basically does not support other properties.
In fact, IE8's support for display attributes is quite complete. However, for the inline-block attribute, IE6/7 only supports elements that are inline themselves.
To learn more about Display support in various browsers, please check here - Shenfei Note
9. Clip
This is an interesting CSS property that can come in handy in special situations. It may be combined with unpredictable, dynamically generated content. Simply put, this attribute allows you to specify a hidden area on a specific element - it can also be understood as, in an absolutely positioned element, the display area of the element is cropped according to certain settings, and the content beyond this area will be be hidden.
Technically speaking, the clip attribute is supported by IE, but only supports comma-free syntax, such as
div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px 300px 200px 100px);
position: absolute;
}
The above style (the attributes in brackets after rect are not separated by commas) can run in most browsers, but may not pass CSS validation 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 that is dynamically applied to a page element when it becomes keyboard (mouse) focus. This is useful on form elements because you can add a border to an input field when it is selected.