[Css] For questions about hr in various browsers, csshr Browser

[Css] For questions about hr in various browsers, csshr Browser

The split line hr is sometimes used on the page, but it is very painful to show in ie6 and ie7. This article will teach you how to write hr compatible with various browsers.

On the home page, let's first understand the differences between hr in various browsers, as shown in the following table:

	Normal Browser	Ie6 and ie7	Firefox
Actual height	Height + border	Height	Height
Background Color	Background-color	Background-color (when the height is <= 2px, the background color of the displayed height is gray, and the color must be set)	Background-color

For example, you can create a dividing line with the actual height of 3px, the border of 1px, the border color of # 07f, and the background color of # f60:

hr{     height:1px;    background-color:#f60;    border:1px solid #000;    *height:3px;/* for ie6 ie7 */    color:#f60;/* for ie6 ie7 */} @-moz-document url-prefix(){ hr{height:3px;}} /* for firefox */

Address: http://sofi.sh/1328

Compatibility with various CSS browsers

You have not asked this question. I will paste the code to you and initialize Each browser version (re-assign a value)

You don't want to initialize it. In the same place, if there are different values in different browsers, you have to write them N times for compatibility and change them N times for modification.
Paste the code I gave you and change it to a specific value. I have used the code for three years and will not mislead you.

When you write a style, the style header must not write the style with the initialization value, as shown in the following:
. * {Margin: 0; padding: 0 ;}
Body, ul, ol, li, dd, dl, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, th {
Border: 0; padding: 0; float: none}
Ul, ol {font-size: 12px; list-style-type: none; color: #414141 ;}
Li, dd, dt {list-style-type: none ;}
Each time you write a style sheet in the future, copy these items first. No matter how you write the margin style values, they are the same.
For example, margin-top: 50px; padding-top: 50px; the top and top margins of all browsers are 50 pixels.
The same applies to others.

In DIV + CSS, how many browser compatibility problems are there?

1 ,! Important
With IE7! Important Support ,! The important method is only compatible with ie6. (note the writing method. Remember that the declaration position must be in advance .)
Code:
<Style>
# Wrapper {
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Style>
2, IE6/IE77 for FireFox <from css style for firefox ie6 ie7>
* + Html and * html are unique tags of IE, which are not supported by firefox at the moment. * + html is also a unique tag of IE7.
Code:
<Style>
# Wrapper {width: 120px;}/* FireFox */
* Html # wrapper {width: 80px;}/* ie6 fixed */
* + Html # wrapper {width: 60px;}/* ie7 fixed, pay attention to the Order */
</Style>
Note:
* + For html compatibility with IE7, the following declaration must be made on the top of HTML:
Code:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "www.w3.org/TR/html4/loose.dtd">