CSS Compatibility tips Daquan (i)

Web page Production WEBJX article introduction: CSS for browser compatibility is sometimes a headache, perhaps when you understand the skills and principles, it will not be difficult, collected from the Internet ie7,6 and FIREOFX compatibility processing skills and organized a bit. For web2.0, try to write code in XHTML format, and DOCTYPE affect CSS processing, as the standard of the consortium, be sure to add DOCTYPE declaration.

CSS for browser compatibility is sometimes a headache, perhaps when you understand the skills and principles, it will not be difficult, collected from the Internet ie7,6 and FIREOFX compatibility processing skills and organized a bit. For web2.0, try to write code in XHTML format, and DOCTYPE affect CSS processing, as the standard of the consortium, be sure to add DOCTYPE declaration.

CSS Tips

1.div Vertical Center Problem

Vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines

2. The question of double margin

Div set to float will double the margin set under IE. This is a bug that IE6 all exist. The solution is to add display:inline to the div;

For example:

< #div id= "Imfloat" >

The corresponding CSS is

#imfloat {

Float:left;

Margin:5px;/*ie under the understanding of 10px*/

Display:inline;/*ie to be understood as 5px*/}

3. Double distance generated by floating ie

#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}

Here's a little bit about block and inline two elements: block element is characterized by always starting on a new line, height, width, row height, margin can be controlled (blocks element); The inline element is characterized by an uncontrollable (inline element) on the same line as other elements;

4 IE with the width and height of the problem

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This problem is large, if only with the width and height, the normal browser in the two values will not change, if only with Min-width and min-height, ie below is not set width and height.

For example, to set the background picture, this width is more important. To solve this problem, you can do this:

#box {width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}

5. The minimum width of the page

Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE does not recognize this, and it actually treats the width as a minimum. In order to make this command available on IE, you can put a

Put it under the label, then specify a class for the Div, and then the CSS is designed like this:

#container {min-width:600px width:expression (Document.body.clientWidth < 600?) "600px": "Auto");

The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.

Source: Web Front Wind

Responsible Editor: Bluehearts