1. Outline The above style (the properties in the brackets after rect are not separated by commas) can be run in most browsers, but may not pass CSS verification because the statement is not separated by commas.
When debugging a CSS problem, I often add borders to the specified element to accurately see what happens to the element and help determine the source of the problem. This is often effective because it gives me more specific visibility in the layout. But if it is a block-level element, this may cause some errors - adding a 1px border to any block-level element will most likely affect the layout, which will add an extra 2px to the width of this element.
The outline property is a perfect alternative because it renders the object without affecting the document flow. However, IE6 and IE7 do not support the outline attribute, so it cannot be used for debugging in both browsers.
2. Inherit (value)
There are many examples in CSS development: "Inherit" all added properties of its parent element by setting certain styles on a specific element, so you can avoid quite a lot of keyboard input.
This can be easily achieved by setting inherit. This can be useful. For example, when rewriting the background attribute, there are often many texts in the attribute (color, URL address, location, etc.). So, instead of rewriting these values, you might just want to consider that the elements in the process have the same background properties as their parent element, an inherit value can do everything - which obviously saves keyboard input a lot.
Unfortunately, inherit values are not supported in IE6 and IE7 (except for direction (text orientation) and visibility properties).
3. Empty-Cells
This property is only used for elements whose table or "display" property is set to "table-cell". If you dynamically add content to a table, you may encounter the empty content of a cell, and then you do not want the empty cell to be hidden.
Using "empty-cells: hide" can solve this problem, which will completely hide cells that may occur.
Internet Explorer does not support the empty-cells attribute.
4. Caption-Side
Speaking of the table attribute, this attribute is used to declare the table title displayed in the sidebar of the table. It accepts four values: top , bottom , left and right. Internet Exporer does not support this property, the table's title will always appear at the top of the table in IE6 and IE7.
5. Counter-Increment / Counter-Reset
Ordered lists (<ol>) are very convenient because they save you the hassle of adding incremental numbers manually, and it allows you to change the sequence of lists without changing the numbers.
CSS has counter-increment and counter-reset properties, which allow you to automatically generate incremental numbers onto almost all HTML elements, just like the effect of an ordered list.
But IE6, IE7 and even Safari (until version 3.x) do not support these properties. Of course, IE6 does not support :before pseudo-elements.
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 could be due to a gradient background, a unique drop-down list, or it could be due to a cool glow effect from PS. But sometimes, there is a lot of content in the page, but the page cannot be expanded as expected.
At this time, the min-height attribute needs to be used, 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 moderately.
The only thing to note with min-height is that it is not supported in IE6. We all know that IE6 is exiting the stage of history (slowly), but some customers may still ask their website to support this damn browser.
But it's nice that IE6 renders the value of height just the same way other browsers render "min-height", so you only need a hack or independent stylesheet for IE6 to add specific stylesheets to that element. height , this problem is solved.
IE6 also ignores min-width , max-height , and max-width , but the above methods are also feasible in these properties.
7. :hover
Technically, :hover is just a pseudo-class, but it is not supported in IE6 (supported by IE7 and IE8). The :hover pseudo-class allows you to add any mouse styles to the element. This is very useful and can avoid (at least to some extent) using JavaScript.
However, if your website needs to fully support IE6, especially in China where IE6 is full of power, then you must consider canceling the use of this pseudo-class unless the relevant tag has a "href" attribute, such as <a> tag . And if this effect is to be achieved, it may be necessary to use 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. These properties 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 attribute, IE6/7 only supports elements that are inline itself.
To learn more about Display's support in various browsers, please refer to this - Shenfei Note
9. Clip
This is an interesting CSS attribute that comes in handy in special cases. It may be combined with unpredictable, dynamically generated content. Simply put, this property allows you to specify hidden areas on a specific element - it can also be understood as in an absolutely positioned element, the display area of the element is cut according to certain settings, and the content beyond that area will be Being hidden.
Technically speaking, the clip attribute is supported by IE, but only supports commas-free syntax, such as
div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px 300px 200px 100px);
position: absolute;
}
10. :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 special style. When a page element becomes the focus of the keyboard (mouse), the style will be applied dynamically to the element. This is very useful on form elements, because you can add a border to an input box when it is selected.