DIV CSS Web page compatible all done (IE6 IE7 IE8 IE9 firefox google)

Common techniques for CSS compatibility

Please try to write code in XHTML format, and DOCTYPE affect the CSS processing, as a standard, must add DOCTYPE declaration.

　　Vertical centering problem for 1.div

Vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not wrap http://www.php100.com

　　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 this div;

For example:

< #div id= "Imfloat" >
The corresponding CSS is
#imfloat {
Float:left;
margin:5px;
Display:inline;}

　3. Double the distance generated by the 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 look at block and inline two elements: The block element is characterized by always starting on new lines, height, width, row height, margin can be controlled (block elements); The inline element is characterized by an uncontrolled (inline element) on the same line as other elements;

#box {display:block;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;

　　4 ie with CSS width and css height questions div css Tips

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

For example, to set the background image, this width is more important. To solve this 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 for this command to work on IE, you can put a

#container {min-width:600px; Width:expression_r (document.body.clientWidth 600?) "600px": "Auto");}

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

　6.DIV floating IE text generates 3 pixel bug

The left object floats, the right side is positioned with the left margin of the outer patch, and 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%;}
*html #left {margin-right:-3px;//This sentence is the key}
<div id= "box" >
<div id= "left" ><div id= "right" ></div>

　　7.IE Hide and seek problem

When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems.

Some content does not show up when the mouse selects this area is found 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. Http://www.php100.com

8.float Div closure, clear float, adaptive height

① For example: #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > here the NOTFLOATC does not want to continue panning, but wants to go down. (where the properties of Floata and FLOATB have been set to float:left;)

This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed. In the #div class= "FLOATB" > "#div class=" NOTFLOATC ">" Plus "#div class=" clear "> this div must pay attention to the location, And there must be no nested relationship with the two Div siblings with the float attribute, otherwise an exception will occur. And the clear style is defined as follows:. clear{Clear:both;}

② as an external wrapper div do not set dead height, div css production in order to let the height can automatically adapt to the wrapper inside add Overflow:hidden; When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved.
For example a certain wrapper is defined as follows:

. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}

③ for typography, the CSS description 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 id= "center" ><div id= "right" ></div>

For example, we want to set the page's background to blue, to achieve the background color of all three columns is blue, but we will find that with the left center right is stretched downward, and the page actually save the height of the same, the problem is CSS production, because the page is not a float property, And our page is to be centered, cannot be set to float, so we should solve

<div id= "Page" >
<div id= "bg" style= "float:left;width:100%" >
<div id= "left" ><div id= "center" ><div id= "right" ></div>
</div>

Embed a float left and the width is 100% of the div solution.

④ Universal float closed (very important!)

For the principle of clear CSS 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 You can do it.

　　
. clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
. clearfix {Display:inline-block;}
　　
. clearfix {Display:block;}
　　
　　

Alternatively, set:. hackbox{display:table;//Display the object as a block-element-level table}

　　9. Height is not self-adapting

Height is not adaptive when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign.

Cases:

#box {}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}
<div id= "box" >
The contents of the <p>p object </div>

Solution Tip: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

　Why is there a gap in the picture under the IE6 of Div+css?

There are many tricks to solve this bug, either to change the layout of the HTML, or to set the IMG to Display:block or set the Vertical-align property to Vertical-align:top

Bottom middle text-bottom can be solved.

11. 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>

　Is the definition ID in the 12.web standard different from class?

(1). The Web Standard is not allow duplicate ID, such as div id= "AA" is not allowed to repeat 2 times, and the CSS class is defined by the class, theoretically can be infinitely repeated, so that the definition of multiple references can be used.

(2). Precedence of attributes

CSS ID priority is higher than class, see the example above

(3). Convenient JS and other client-side script, if you want to script an object in the page, then you can define an ID, otherwise only by traversing the page element plus specify a specific attribute to find it, this is a relatively waste of time resources, far less than a simple ID.

Tips for displaying ellipses in Li content beyond length

This tip works 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>

14. Why IE cannot set scroll bar color in Web Standard

The solution is to replace 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" content= "text/html; charset=gb2312 "/>

<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;
}
-

　　15. Why can't I define a container with around 1px height?

IE6 This problem is due to the default row height, there are many techniques to solve, such as:
Overflow:hidden zoom:0.08 line-height:1px

　　16. How can I make the layer appear above flash?

The workaround is to set the flash to transparent

<param name= "wmode" value= "Transparent"/>

17. How to make a layer vertically centered in the browser

Here we use the percent absolute positioning, with the technique of negative value of the outer patch, the size of the negative to its own width height divided 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>

Firefox and IE CSS-compatible CSS hack tips

　1. Div centering problem

Div set Margin-left, margin-right for Auto is already centered, ie not, ie need to set the body center, first in the parent element definition text-algin:center; This means that the content within the parent element is centered.

　　2.CSS Link (A-label) border and background

A link with border and background color, need to set Display:block, and set Float:left guarantee not wrap. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.

3. Hover style does not appear after hyperlink access

The clicked Hyperlink style is not hover and active, many people should have encountered this problem, the solution is to change the order of CSS properties: l-v-h-a

Code:

<style type= "Text/css" >
<!--
A:link {}
a:visited {}
a:hover {}
a:active {}
-
</style>

　4 Finger cursor

Cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can

　　Padding and margin of 5.UL

UL label in FF default is padding value, and in IE only margin default has value, so first define ul{margin:0;padding:0;} Will solve most of the problems.

　6. Form Label

This tag in IE, will automatically margin some margins, and in the FF margin is 0, so if you want to show consistency, so it is best to specify the margin and padding in the CSS, for the above two issues, my CSS is generally used first in the style Ul,form {margin:0;padding:0;} The definition died, so the back will not be a headache for this.

　7. Box model Interpretation inconsistency problem

The inconsistency between the box models in FF and IE leads to a 2px resolution: div{margin:30px!important;margin:28px; Note that the order of the two margin must not be written in reverse, important this property IE does not recognize, But other browsers can identify. So under IE it is actually interpreted as:

DIV{MARING:30PX;MARGIN:28PX} Repeat the definition in accordance with the last one to execute, so can not write only margin:xx px!important; #box {width:600px;//for ie6.0-w\idth : 500px; For ff+ie6.0}
#box {width:600px!important//for ff width:600px;//for ff+ie6.0 width:500px;//for ie6.0-}

　　8. Attribute selector (this is not compatible, is a bug to hide CSS)

p[id]{}div[id]{}

This is hidden for IE6.0 and IE6.0 versions, FF and opera. There is a difference between the property selector and the child selector, the range of the sub-selector is reduced in form, the range of the property selector is larger, such as P[id], and all P tags have the same type of ID.

　9. The most ruthless means-!important

If there is no way to solve some of the details, you can use this technique. FF will automatically parse for "!important", but IE will be ignored.

. tabd1{
Background:url (http://www.php100.com/res/images/up/tab1.gif) no-repeat 0px 0px!important;
Background:url (http://www.php100.com/res/images/up/tab1.gif) no-repeat 1px 0px; }

It is worth noting that the XXXX!important must be placed on top of another sentence.

Default value problem for 10.IE,FF

Maybe you've been complaining about why you have to write different CSS specifically for IE and FF, why IE makes people headache, and then while writing CSS, while cursing that hateful m$ ie. in fact, for the standard of CSS support, IE is not as bad as we think, the key is that the default value of IE and FF is not the same, mastered this technique, you will find that compatible with FF and IE CSS is not so difficult, perhaps for the simple CSS, you can absolutely not "! Important "This thing up.

We all know that the browser in the Display page, the Web page will be based on the CSS style sheet to determine how to display, but we do not necessarily have all the elements in the stylesheet is described in detail, of course, there is no need to do so, for those not described in the property, the browser will use the built-in default way to display , such as text, if you do not specify a color in the CSS, then the browser will be in black or system color to display, div or other elements of the background, if not specified in the CSS, the browser will be set to white or transparent, and so on other undefined style. So there's a lot of things. The root cause of the difference between FF and IE is that their default display is different, and how this default style should be displayed I know there are no corresponding standards in W3, so don't blame IE for this.

　　11. Why the text in FF cannot open the height of the container

The container of fixed height value in standard browser is not open like IE6, then I want to fixed height, and want to be able to be open how to set it? The way is to remove height setting min-height:200px; Here in order to take care of the IE6 do not know min-height can be defined as:

{
Height:auto!important;
height:200px;
min-height:200px;
}

12.FireFox How to make a continuous long field wrap

It is well known that IE uses word-wrap:break-word directly, in FF we use JS to insert
The skills to solve

<style type= "Text/css" >
<!--
div {
width:300px;
Word-wrap:break-word;
border:1px solid red;
}
-
</style>

<div id= "FF" >aaaaaaaaaaaaaaaaaaaaaaaaaaaa

<scrīpt type= "Text/javascrīpt" >
　　
function Tobreakword (el, Intlen) {
Varōbj=document.getelementbyidx_x_xx_x_x (EL);
var strcontent=obj.innerhtml;
var strtemp= "";
while (Strcontent.length>intlen) {
Strtemp+=strcontent.substr (0,intlen) + "
";
Strcontent=strcontent.substr (intlen,strcontent.length);
}
strtemp+= "
"+strcontent;
Obj.innerhtml=strtemp;
}
if (document.getelementbyidx_x_xx_x_x &&!document.all) tobreakword ("FF", 37);
　　
</scrīpt>

　13. Why is the width of the IE6 under the container different from the FF interpretation?

The difference is that the overall width of the container is not the width of the border (border) in the inside, where IE6 is interpreted as 200PX, and FF is interpreted as 220PX, that is how to cause the problem? Everyone put the top of the container to remove the XML will find the original problem here, the top of the declaration triggered the IE Qurks mode.

<?xml version= "1.0" encoding= "gb2312"?>
<! 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" content= "text/html; charset=gb2312 "/>
<style type= "Text/css" >
<!--
div {
Cursor:pointer;
width:200px;
height:200px;
border:10px Solid Red
}
-
</style>
<divōnclick= "alert (this.offsetwidth)" > Make Firefox compatible with IE

IE7.0 support for CSS also has new problems, resolved as follows.

First, CSS HACK

BPX;
_height:20px;

Note the order.

This also belongs to the Div CSS HACK, but it is not as concise as above.

#example {color: #333;}
* HTML #example {color: #666;}
*+html #example {color: #999;}

The second type is the conditional CSS annotations that are used exclusively by IE

<!--other browsers--
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>

<!--[if IE 7]>
<!--suitable for IE7---
<link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/>
<! [endif]-->

<!--[If LTE IE 6]>
<!--suitable for IE6 and---
<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>
<! [endif]-->

Third, the CSS filter method, the following is translated from the foreign website.

Create a new CSS style as follows:

#item {
width:200px;
height:200px;
background:red;
}

Create a new div and use the style of the CSS that you defined earlier:

<div id= "Item" >some text here

Add the lang attribute to the body expression, in Chinese en:

<body lang= "en" >

Now define a style for the DIV element:

*:lang (en) #item {
Background:green!important;
}

DIV CSS Web page compatible all done (IE6 IE7 IE8 IE9 firefox google)