Browser compatibility in DIV + CSS and tips for using div + css

I believe many of my friends will encounter this problem when making div + css pages, because the explanation of HTML tags and CSS style sheets in IE series browsers is different from that in other browsers, therefore, some small bugs and webpage misplacement often occur during page creation. The following Webmaster will explain how to be compatible with various browsers in div + css.

First, we need to check the corresponding HTML Tag. If your tag is incorrect, no matter how you modify the CSS style, it will not solve the problem. Even veterans often make tag nesting errors. Whether the CSS style is incorrect. For example, if you have missing the semicolon (;), do you forget the ending braces. Whether the DOCTYPE declaration is forgotten in HTML.

Pay attention to CSS styles. The float element must specify a fixed width and clear the float. In addition, the float element cannot specify the margin attribute, because there is a BUG in IE6 browser, the total width of float floating elements is less than 100%, that is, the width of the box of the parent layer. When we create a css, we need to set all labels to the default format, that is, to set padding and margin to 0. We can use "*" to restore the default style, in various browsers, the internal and external spacing of default div, li, ul and other labels is different. Therefore, we need to set all labels to 0 and separate them when needed.

However, no matter how you check, HTML and CSS are fine, but they are incompatible, you can use the hack between various browsers to solve compatibility problems, below I will give some of my commonly used browser hack.

1 ,! Important

! Important is a hack exclusive to standard browsers such as Firefox. IE6 does not support this statement and must be declared in advance. Example (. div {width: 100px! Important ;}. div {width: 50px;}). The DIV of Firefox and other standard browsers is 100 pixels in width, while IE6 is 50 pixels in width.

* Html * + html/9

These three tags are unique to IE6, IE7, and IE8, so that you can set different styles for IE6, IE7, and IE8 respectively, such as * html div {width: 100 ;} * + html div {width: 90px;} div {width: 80px/9;} in this way, the width of IE6 is 100 pixels, and the width of IE7 is 90 pixels, the width of IE8 is 80 pixels, so if we combine the above! Important, You can thoroughly set styles for standard browsers such as IE6, IE7, IE8, and Firefox to achieve browser compatibility.

As mentioned above, it is very easy to create a webpage compatible with mainstream browsers. The only difference is that there are more CSS code. The following describes some tips for using div + css.

Write div {width: 100px; margin: 0 auto;} in CSS to center the DIV block horizontally throughout the webpage.

Write div {height: 20px; line-height: 20px;} in CSS to vertically center the content in this DIV in the height of 20 pixels, however, you must note that the content cannot be wrapped in a line break. Otherwise, the content in Firefox and other browsers will overlap, while the content in IE will be wrapped in a line feed.

To Set width and height for inline elements, such as span and a labels, you must set them as block elements, a, span {display: block or inline-block ;} the first one is to change the and span labels into block elements, and the second one is to change a and span to inline block elements.

Ul, li, and other elements have styles and padding in various browsers. Therefore, we should declare them in advance before use.

Clear float. It can be used. clear {clear: both;} needs to be set at the Floating End position. You can also set div {height: 1%; overflow: hidden;} in the parent tag ;} this can also clear the floating, but sometimes it is difficult to make it, you still need to use the first method.

The above is my personal summary of the use of div + css compatibility and skills. If there are any omissions, you are welcome to add them below, hoping to solve your problem. (Webmaster good station original http://www.zzhaoz.com/wangzhanyunying/wangzhansheji/20110912/243)