FF and IE

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

Clicked hyperlink style is not hover and active, many people should have encountered this problem, the workaround 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 to first use such a 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 of the box model 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 is not recognized,

But other browsers can identify. So in the IE is actually interpreted as such: div {maring:30px;margin:28px} repeated definition, according to 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 from the IE6.0 and IE6.0 versions, as well as the FF and opera functions. 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,

As in P[id], 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, we can use this method. FF will automatically parse for "!important", but IE will ignore it.

as follows. tabd1{Background:url (/res/images/up/tab1.gif) no-repeat 0px 0px!important;/*style for ff*/

Background:url (/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} It is worth noting that XXXX!important is placed on top of another sentence, which has already been mentioned

Default value problem for 10.IE,FF

Perhaps you have been complaining about why you should specifically for IE and FF write different CSS, why ie so people headache, and then while writing CSS, while cursing that hateful m$ ie. in fact, for the standard support of CSS, IE is not as we think it can be

Evil, 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 the simple CSS, you can completely do not "!important" this thing. We all know

Tao, the browser in the Display page, will be based on the Web page CSS style sheet to determine how to display, but we do not necessarily have all the elements in the style sheet is described in detail, of course, there is no need to do so, for those who do not describe the

property, the browser will be displayed in a built-in default way, 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 sets it to white or transparent, and so on other undefined styles. 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 is displayed I know in W3

There are no corresponding standards to the rules, so for this also do not blame ie.

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

2.FireFox How to make a continuous long field wrap

It is well known that the use of word-wrap:break-word directly in IE, FF we use the method of JS insertion to solve <style type= "Text/css" > <!--div {width:100px;

Word-wrap:break-word; border:1px solid red; --</style> <div id= "FF" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<scrīpt type= "TEXT/JAVASCRĪPT" >/* <! [cdata[*/

function Tobreakword (el, Intlen) {Varōbj=document.getelementbyid (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.getElementById &&!document.all) tobreakword ("FF", 37); /*]]> */</scrīpt>

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

<?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> the difference between the width of the container is not the width of the border (border) in its contents, Here IE6 is interpreted as 200PX,

And the FF is interpreted as 220PX, how exactly is the problem caused? Everyone put the container top of the XML removed will find the original problem in this, the top of the declaration triggered the IE qurks mode, about Qurks mode, Standards mode related

Knowledge, please refer to: http://www.microsoft.com/china/msdn/library/webservices/asp.net/aspnetusstan.mspx?mfr=true


Ie6,ie7,ff IE7.0 out, the support for CSS has new problems. Browser more, Web page compatibility Worse, tired or we, to solve IE7.0 compatibility problem, find the following article: Now I mostly use!important to hack, for IE6 and Firefox test can be normal display, but IE7 to! Important can be interpreted correctly and will cause the page not to be displayed as required! The following is a compatibility collection of three browsers.

The first, is the CSS hack method


height:20px; /*for firefox*/
*height:25px; /*for IE7 & ie6*/
_height:20px; /*for ie6*/Note the order.

This also belongs to CSS HACK, but it is not as concise as above.
#example {color: #333;}/* Moz */
* HTML #example {color: #666;}/* IE6 */
*+html #example {color: #999;}/* IE7 */

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

<!--[if IE 7]> <!--fit 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 the classic translation from foreign sites.


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</div>

Add the lang attribute to the body expression here, Chinese for zh:<body lang= "en" > now define a style for the DIV element again:
*:lang (en) #item {
Background:green!important;
}

This is done in order to overwrite the original CSS style with!important, because: lang selector ie7.0 does not support, so this sentence will not have any effect, so also achieved the same effect ie6.0, but unfortunately, Safari also does not support this property, So you need to add the following CSS style: #item: empty {background:green!important}: Empty selector is a specification of CSS3, although Safari does not support this specification, it will still be selected, whether or not this element exists, Now the green will now be on browsers other than IE versions. Compatibility with IE6 and FF can be considered in the previous!important personal preference

FF and IE