CSS browser compatibility is sometimes a headache, perhaps when you understand the skills and principles, you will find it is not difficult, from the online collection of ie7,6 and FIREOFX compatibility processing methods and collated. For web2.0 excesses, try to write code in XHTML format, and doctype affect CSS processing, as the standard of the consortium, must add DOCTYPE statement.
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 line
2. Margin double question
The Div
set to float will double the margin set under IE. This is a bug that is IE6. The solution is to add display:inline to the div;
For example:
< #div id= "Imfloat" >
corresponding CSS for
#IamFloat {
Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie is understood as 5px*/}
3. Double distance
from 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 to elaborate on 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;
#box {display:block;//can simulate an inline element as a block element display:inline;//To achieve the effect of the same row arrangement diplay:table;
4 ie with width and height 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 these 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. 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 turns the width to the minimum. To make this command available on IE, you can put a <div> under the <body> tab, and then assign a class to the Div, and then CSS design:
#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 documents less formal. It actually achieves the minimum width through JavaScript's judgment.
6.DIV Floating IE text produces 3 pixel bugs
The left side of the object floating, the right side of the outer patch to locate the left margin, the right object within the text will be left with 3px spacing.
#box {float:left; width:800px}
#left {float:left; width:50%}
#right {width:50%}
*html #left {margin-right:-3px;//This is the key}
<div id= "box" >
<div id= "left" ></div>
<div id= "right" ></div>
</div>
7.IE Hide-and-Seek problem
when the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek.
Some content does not appear when the mouse selects this area is found to be true 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 Closure, clear float, adaptive height;
① For example:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > here NOTFLOATC do not want to continue panning, but want to go down. (where the Floata, FLOATB properties are already set to Float:left
This code has no problem with IE, the problem is 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" > plus < #div class= "clear" > this div must pay attention to the position, Also, there must be a nested relationship with two Div siblings with the float property, or an exception will occur. and define clear this style as follows:. clear{Clear:both;
② as an external wrappers div do not set dead height, in order to allow the height can automatically adapt to the wrappers inside add Overflow:hidden; When the box contains float, the height of automatic adaptation in IE invalid, this time should trigger IE layout private properties (Evil ie Ah!). Can be done with zoom:1, so that compatibility is achieved.
For example a certain wrappers is defined as follows:
. colwrapper{overflow:hidden zoom:1; margin:5px Auto;
③ for typography, the most common CSS description we use is probably float:left. Sometimes we need to do a unified background behind the N-column float div, such as:
<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 to achieve the background color of all three columns is blue, but we will find that as the right of left center stretched down, and page actually saved height, the problem comes because page is not a float property, And our page because we want to center, can not be set to float, so we should solve the
<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>
embed a float left and the width is 100% div solution
④ Universal Float closure (very important!)
on the principle of clear float, see [How to clear floats without structural Markup], add the following code to the global CSS, add class= "Clearfix" to the div that needs to be closed .
/* 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 * *
or This setting:. hackbox{display:table;//Display the object as a block element-level table
11. Highly
height is not adaptable when the height of the inner object changes when the outer height is not automatically adjusted, especially when the inner object uses margin or paddign.
Example:
#box {background-color: #eee;}
#box p {margin-top:20px;margin-bottom:20px; Text-align:center}
<div id= "box" >
<p>p Object Content </p>
</div>
Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.
12. IE6 Why there is a gap under the picture
There are a number of ways to
this bug, either by changing the layout of HTML, or by setting IMG as Display:block or by setting the Vertical-align attribute to Vertical-align:top | NRC |middle |text-bottom can be solved.
13. How to align text with the input box
plus vertical-align:middle;
<style type= "Text/css" >
<!--
Input {
width:200px;
height:30px;
border:1px solid red;
Vertical-align:middle;
}
-->
</style>
What is the difference between defining ID and class in the
14.web standard
A. Web standards are not allowed to duplicate IDs, such as Div id= "AA" does not allow repeated 2 times, and class definition is a class, theoretically can be infinitely repetitive, so need to refer to the definition of multiple references can use him.
two. Attribute priority problem
ID has precedence over class, see above example
three. Convenient JS and other client-side script, if you want to script an object on the page, you can define an ID, otherwise only the use of traversal page elements plus the specified specific attributes to find it, this is a relatively waste of time resources, far less than a simple ID.
15. A method that displays an ellipsis after the content exceeds the length in Li
This method is applicable with IE and op browser
<style type= "Text/css" >
<!--
Li {
width:200px;
White-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
Overflow:hidden;
}
-->
</style>
16. Why IE cannot set the scroll bar color in web standards
The
solution is to replace the body with HTML
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" C/>
<style type= "Text/css" >
<!--
HTML {
Scrollbar-face-color: #f6f6f6;
Scrollbar-highlight-color: #fff;
Scrollbar-shadow-color: #eeeeee;
Scrollbar-3dlight-color: #eeeeee;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: #fff;
Scrollbar-darkshadow-color: #fff;
}
-->
</style>
17. Why can't I define a container with a height of around 1px
IE6 This problem is due to the default row height caused by the resolution of a number of ways, such as: Overflow:hidden | zoom:0.08 | line-height:1px
18. How can you let layers appear above flash
solution is to set up a transparent
flash
<param name= "wmode" value= Transparent "/>"
19. How to align a layer vertically in the browser
Here we use the percent absolute positioning, the method with the negative value of the outer patch, and the negative value is divided by the height of its width by two
<style type= "Text/css" >
<!--
Div {
Position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0-100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
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
