DIV+CSS Web page compatible with all major browser tips (ie6/ie7/ie8/ie9/firefox/chrome)

CSS Compatibility common skills

Please try to write code in strict XHTML format, must add DOCTYPE declaration, because DOCTYPE affect the CSS processing, affect the standard of the consortium.

Vertical center of text in 1.div

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;
Display:inline;}

. 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 CSS width and css height issues div CSS Tips

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. To make this command available 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 production 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.

6.DIV floating IE text produces 3 pixel bugs

The left side of the object floating on 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 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, div and so on this time is prone to hide and seek.

Some content does not show up 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: the #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 have been 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 the #div class= "FLOATB" > #div class= "NOTFLOATC" > Add the #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 be generated. and define clear this style as follows:. clear{Clear:both;

② as an external wrapper div do not set dead height, div css production in order to allow height can automatically adapt to the wrapper inside plus 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 wrapper 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, 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 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 incredibly save height, the problem comes from CSS, because page is not a float property, And our page is centered and 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 solution.


④ Universal Float closure (very important!)

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

or this setting:. hackbox{display:table;//Display the object as a block element-level table}

9. Height is not adaptive

Height is not adaptive 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.

Cases:

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

Workaround: Add 2 empty div objects to the P object CSS code:. 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 a number of techniques to solve this bug, either by changing the layout of the HTML, or by setting IMG to Display:block or setting the Vertical-align attribute to Vertical-align:top

Bottom middle text-bottom can be solved.

11. How to align text with an input box

Plus vertical-align:middle;

<style type= "Text/css" >
<!--
Input {
width:200px;
height:30px;
border:1px solid red;
Vertical-align:middle;
}
-->
</style>

does the definition ID and class differ in the 12.web standard?

(1). The Web Standard is not allowed to duplicate ID, such as div id= "AA" does not allow repeat 2 times, and CSS class definition is a class, theoretically can be infinitely repetitive, so need to refer to the definition of multiple references can use him.

(2). Priority issues for attributes

CSS IDs have precedence over class, and look at the example above

(3). Convenient JS and other client-side script, if you want to script an object on the page, you can define an ID, otherwise only use the traversal 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 showing ellipses after the content exceeds length in Li

This technique works with IE and op browsers

<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 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" 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;
}
-->
</style>

15. Why cannot define a container of about 1px height

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

16. How can I let the layer display above flash?

The solution is to set the flash transparent

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

17. How to align a layer vertically in the browser

Here we use the percent absolute positioning, with the tip of the outer patch negative, minus the size of its width 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>

-----------------Gorgeous split Line------------------------------

CSS compatible CSS hack techniques for Firefox and IE

1. Div Center Problem

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

border and background of 2.CSS Link (a label)

A link with border and background color, you need to set Display:block, while setting float:left guarantee do not wrap. Refer to MenuBar, to 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. The problem that hover style does not appear after the hyperlink is accessed

The hyperlinks that have been clicked are not hover and active, and many people should have encountered this problem, the trick is to change the order of CSS attributes: l-v-h-a

Code:

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

4. Cursor finger cursor

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

the padding and margin of 5.UL

The UL label in FF has the padding value by default, and in IE only margin default has the value, therefore first defines ul{margin:0;padding:0;} We can solve most of the problems.

6. Form Label

This label in IE, will automatically margin some margins, and in the FF margin is 0, so if you want to show consistent, so it is best to specify margin and padding in CSS, for the above two issues, my CSS is generally the first use of this style ul,form {margin:0;padding:0;} The definition is dead, so the back won't be a headache.

7. Box model explains inconsistencies

In FF and IE, the box model explains inconsistencies, resulting in a 2px resolution: div{margin:30px!important;margin:28px} Note that the order of these two margin must not be written in reverse, important this attribute IE is not recognized, But other browsers can identify. So in IE, in fact, explained that:

DIV{MARING:30PX;MARGIN:28PX} Repeat the definition followed by the last one, so you cannot write only margin:xx px!important; #box {width:600px;//for ie6.0-width : 500px; For ff+ie6.0}
#box {width:600px!important//for ff width:600px;//for ff+ie6.0 width:500px;//for ie6.0-}

8. Property selector (This is not compatible, is a hidden CSS bug)

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

This is hidden from the IE6.0 and IE6.0 versions, FF and opera. There is a difference between the property selector and the child selector, and the scope of the child selector is reduced in form, and the property selector is larger in scope, as in P[id], all of the 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 give priority to "!important", while IE will ignore it.

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

It is worth noting that the XXXX!important must be placed above another sentence.

default value problem for 10.ie,ff

Perhaps you have been complaining about why to write different CSS for IE and FF, why is IE so annoying, and then write CSS and curse The hateful m$ IE. In fact, for the standard support of CSS, IE is not as hateful 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 the compatibility of FF and IE CSS is not so difficult, perhaps for simple CSS, you can not "!" Important "This thing out."

As we all know, when browsers display Web pages, will be based on the CSS style sheet of the Web page to determine how to display, but we do not necessarily have all the elements in the stylesheet to describe the specific, of course, do not need to do so, for those who do not describe the properties, the browser will be built-in default way to display , such as text, if you do not specify a color in the CSS, then the browser will use black or system colors 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. FF and IE are not the same because their default display is not the same, and this default style how to show that I know in the W3 there is no corresponding standard to make rules, so don't blame IE for this.

11. Why FF under the text can not open the height of the container

Standard browser fixed height value of the container is not as IE6 as the open, then I want to fixed height, but also want to be able to be stretched how to set it? method is to remove the height set min-height:200px; Here to take care of the IE6 that don't know min-height can be defined like this:

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

12.FireFox How to make consecutive long fields wrap automatically

It is well known that IE can use Word-wrap:break-word directly, FF we use JS to insert
Skills to solve

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

<div id= "FF" >aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<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 container under IE6 different from the FF interpretation?

The difference is that the overall width of the container does not include the width of the border (border) in it, here IE6 interpreted as 200PX, and FF is interpreted as 220PX, that is how to cause the problem? When you remove the XML from the top of the container, you will find that the problem is here, and the top statement triggers IE's 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 </div>

IE7.0 's support for CSS has new problems, which are addressed below.

the first kind, CSS HACK

BPX;
_height:20px;

Note the order.

This also belongs to the Div CSS HACK, but not as simple as above.

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

The second is the use of IE-specific conditions CSS annotations

<!--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]-->

The Third Way, 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 CSS style that you defined earlier:

<div id= "Item" >some text here</div>

In the body display here The lang attribute is added, Chinese is en:

<body lang= "en" >

Now define a style for the DIV element:

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