What is the Purpose of Asterisk-Preceded Properties in CSS?

Understanding the Star-Preceded Properties in CSS

When examining a CSS file, one may encounter properties preceded by an asterisk (*). This "star property hack" is commonly employed to resolve cross-browser compatibility issues by targeting specific internet browsers, particularly Internet Explorer.

CSS includes properties such as "display," "margin," and "padding" that affect the appearance and layout of HTML elements. In the example provided:

div.with-some-class {
    display:block;                   
    margin:0;
    padding:2px 0 0 0;
    *padding:1px 0 0 0;
    font-size:11px;   
    font-weight:normal;
    *line-height:13px;
    color:#3D9AD0;
}

The properties preceded by an asterisk (padding and line-height) are targeted specifically at Internet Explorer versions up to version 7. These star-preceded properties define different values for the affected properties for Internet Explorer, while the non-preceded properties apply to all other browsers.

For instance, in the above example, padding specifies that the top padding should be 1 pixel for Internet Explorer, while padding sets it to 2 pixels for all other browsers. Similarly, line-height sets the line height to 13 pixels in Internet Explorer, while line-height sets it to the default value for all other browsers. This allows for cross-browser compatibility without the need for separate style rules for each browser.

The above is the detailed content of What is the Purpose of Asterisk-Preceded Properties in CSS?. For more information, please follow other related articles on the PHP Chinese website!