Home > Developer > Web Develop
CSS compatibility with the browser is sometimes a very headache, perhaps when you understand the techniques and principles, it will be considered not difficult, from the online collection of ie7,6 and FIREOFX compatibility treatment method and collated. For web2.0, try to write code in XHTML format, And doctype affect the CSS processing, as the standard, must add DOCTYPE fame
CSS Tips
Vertical centering problem for 1.div
Vertical-align:middle; Add line spacing to the same height as the whole div line-height:200px; Then insert the text and center it vertically.
The disadvantage is to control the content not to break the line
2. Question of margin doubling
A div set to float doubles the margin set under IE. This is a bug that exists in a IE6. The solution is to add display:inline to the div;
Like what:
< #div id= "Imfloat" >
The corresponding CSS is
#IamFloat {
Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie under the 5px*/}
3. Double the distance generated by the floating IE
#box {float:left; width:100px; margin:0 0 0 100px; Under such circumstances, IE will produce 200px distance display:inline; Make floating Ignore}
Here's a look at block and inline two elements: The block element is characterized by the ability to always start on new lines, height, width, row height, and margins to control (block elements); The inline element is characterized by an uncontrolled (inline element) on the same line as other elements;
#box {display:block;//can simulate the inline element as a block element display:inline;//Achieve the effect of the same row arrangement diplay:table;
4 ie with width and height issues
IE does not recognize the definition of min-. But in fact it treats the normal width and height as a condition of min. This is a big problem, assuming only width and height. These two values will not change in a normal browser. Suppose only with Min-width and Min-height. ie the following basically does not set the width and height.
For example, to set the background image, this width is more important. To solve the problem, you can:
#box {width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}
5. Minimum width of the page
Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width.
In order to make this command available on IE, a <div> can be placed under the <body> tab. 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. This is only recognized by IE. This will also make your HTML document less formal. It actually uses JavaScript inference to achieve the minimum width. &NBSP;&NBSP
6.DIV floating IE text generates 3 pixels of bug
Left object floating, the right side with the outer patch left margin to locate, The text within the right object is spaced 3px away from the left.
#box { float:left; width:800px;}
#left { float:left; width:50%;}
#right { width:50%;} &NBSP;&NBSP,
*html #left { margin-right:-3px; //This sentence is the key}
<div id= " Box ">&NBSP;&NBSP;
<div id=" left "></DIV>&NBSP;&NBSP;
<div id=" Right "></DIV>&NBSP;&NBSP;
</div>
7.IE Hide and seek issues
When the div application is complex, there are links in each column. Div and so on this time easy to play hide and seek problem.
Some things don't show up. When the mouse selects this area it is found that the content is indeed on the page. WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
8.float Div closed; clear floating; self-adapting height;
① such as:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > NOTFLOATC here do not want to continue panning. But hopefully down the line. (The properties of Floata and FLOATB are already set to Float:left;)
This code is no problem in IE. The problem is the FF. The reason is that NOTFLOATC is not a float label and the float label must be closed.
In < #div class= "FLOATB" > < #div class= "NOTFLOATC" > Add < #div class= "clear" > this div must be aware of the location. And there must be no nested relationships between the two div siblings with the float attribute. Otherwise, an exception is generated. And the clear style is defined as for example the following can be:. clear{Clear:both;}
② as an external wrapper div do not set dead height, in order to allow the height of their own initiative to adapt to the wrapper inside add Overflow:hidden; When including the float box, the height of their own active adaptation in IE invalid. This time should trigger the layout of IE private properties (evil ie Ah!) ) with zoom:1; be able to do so to achieve compatibility.
For example a certain wrapper such as the following definition:
. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}
③ for typography, the CSS narrative that we use most probably is float:left. Sometimes we need to do a uniform background behind the float div in the n column, for example:
<div id= "Page" >
<div id= "left" ></div>
<div id= "center" ></div>
<div id= "right" ></div>
</div>
For example, we want to set the background of the page to blue, so that the background color of all three columns is blue, but we will find that as the left center of right is stretched downward, and the page is saved to the same height, the problem is that the page is not a float property. And our page is to be centered, cannot be set to float, so we should solve this
<div id= "Page" >
<div id= "bg" style= "float:left;width:100%" >
<div id= "left" ></div>
<div id= "center" ></div>
<div id= "right" ></div>
</div>
</div>
Then embed a float left and the width is 100% div solved
④ Universal float closed (very important!)
The principle of clear float can be seen in [how to clear floats without Structural Markup], add the following code to the global CSS, the need to close the div plus class= "clearfix" can Tried.
/* Clear Fix */
. clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
. clearfix {Display:inline-block;}
/* Hide from IE MAC */
. clearfix {Display:block;}
/* End Hide from IE Mac */
/* End of Clearfix */
Alternatively, set:. hackbox{display:table;//Display the object as a block-element-level table}
CSS browser compatibility problem set (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
