FAQ about IE and FF

1. DivCenter problem
When div sets margin-left and margin-right to auto, it is already centered,
IE doesn't work. IE needs to set the body to center,
First, define text-algin: center in the parent element;
This means that the content in the parent element is centered.
2.Link(Tag)Border and background
Add the border and background color to the link. Set display: block and float: left to avoid line breaks.
Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side,
If no height is set, you can insert a space in menubar.
3.After the hyperlink is accessedHoverStyle issues
The hyperlink style that has been clicked and accessed does not have hover or active
Solution:
Changing the order of CSS properties: L-V-H-A
Code:
<Style type = "text/css">
<! --
A: link {}
A: visited {}
A: hover {}
A: active {}
-->
</Style>
4.Cursor fingerCursor
Cursor: pointer can display the cursor finger in ie ff at the same time,
Hand can only be IE
5. ULOfPaddingAndMargin
The ul tag has a padding value by default in FF,
In IE, only margin has the default value,
Therefore, defining ul {margin: 0; padding: 0;} can solve most of the problems.
6. FORMTag
In IE, this label will automatically margin some margins, while in FF, margin is 0,
Therefore, if you want to display the same data, it is best to specify the margin and padding in css,
For the above two problems, this style is generally used in my css.
Ul, form {margin: 0; padding: 0 ;}
Definition is dead, so it won't be a headache in the future.
7. BOXInconsistency in MODEL INTERPRETATION
The BOX model interpretation in FF and IE is inconsistent, resulting in a 2px difference
Solution:
Div {margin: 30px! Important; margin: 28px ;}
Note that the order of the two margin values must not be reversed. The attribute IE of important cannot be identified,
But other browsers can recognize it.
So in IE, it is actually explained as follows:
Div {maring: 30px; margin: 28px}
If the definition is repeated, execute the last one. Therefore, you cannot 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.,Yes hideCssOneBug)
P [id] {} div [id] {}
This is hidden for versions earlier than IE6.0 and IE6.0,
FF and OPera functions. The attribute selector and the sub-Selector are different,
The range of the sub-selector is reduced in the form,
The attribute selector has a large range,
For example, in p [id], all p tags have IDs in the same style.
9.The most cruel means-! Important;
If there is no way to solve some detailed problems,
You can use this method. FF "! Important will automatically give priority to resolution,
However, IE will ignore.
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 must be added! Important is placed on the other sentence, which has been mentioned above
10. IE, FFDefault Value
Maybe you have been complaining about why writing different CSS for IE and FF,
Why is it that IE is a headache, and then write css while cursing the hateful M $ IE.
In fact, for the standard support of css, IE is not as bad as we think,
The key is that the default values of IE and FF are different. I have mastered this technique,
You will find that writing css compatible with FF and IE is not that difficult, maybe for simple css,
You don't have "! Important.
We all know that when a browser displays a webpage, it determines how to display it based on the css style sheet of the webpage,
However, we may not describe all the elements in the style sheet,
Of course there is no need to do that, so for those attributes that are not described,
The browser uses the built-in default mode for display, such as text,
If you do not specify a color in css, the browser uses black or system color to display the background of the div or other elements,
If it is not specified in css, the browser sets it to white or transparent, and so on.
So the root cause of the difference between FF and IE display is that their default display is different, and how to display this default style? I know there are no corresponding standards in w3 to define,
So don't blame IE for this.
11.Why?FFThe following text cannot support the height of the container
Containers with fixed height values in standard browsers will not be opened as in IE6,
Then I want to fix the height and how can I set it to be supported?
The method is to remove the min-height: 200px setting of height;
In order to take care of IE6 who do not know min-height
You can define {height: auto! Important; height: 200px; min-height: 200px ;}
12. FireFoxHow to enable automatic line feed for continuous long Fields
We all know that Internet Explorer can use word-wrap: break-word directly,
In FF, we use the JS insert method to solve the problem.
<Style type = "text/css">
<! --
Div
{
Width: 300px;
Word-wrap: break-word;
Border: 1px solid red ;}
-->
</Style>
<Div id = "ff"> here is a long line of text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>
<Scr limit pt type = "text/merge Cr limit pt">
/* <! [CDATA [*/
Function toBreakWord (el, intLen)
{
Var export 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 platinum pt>
13.Why?IE6Container width andFFDifferent explanations
<? 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 export nclick = "alert (this. offsetWidth)"> make FireFox compatible with IE </div>
The difference is whether the overall width of the container includes the border width,
Here, IE6 is interpreted as 200PX, while FF is interpreted as 220PX. How is the problem caused?
If you remove the xml at the top of the container, you will find that the original problem exists. The declaration at the top triggers the qurks mode of IE and related knowledge about qurks mode and standards mode,
Please refer to: http: // www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan. mspx? Mfr = true
IE6, IE7, and FF IE7.0 are coming out, and there are new problems with CSS support. When there are more browsers and the webpage compatibility is worse, we are still exhausted,
To solve IE7.0 compatibility problems, I found the following article:
I use most of them now! Important comes to hack. It can be displayed normally for ie6 and firefox tests,
But ie7! Important can be correctly explained, and the page will not be displayed as required!

Below isCompatibility of three browsersCollection.

First, yesCSS HACKMethod
Height: 20px;/* For Firefox */
* Height: 25px;/* For IE7 & IE6 */
_ Height: 20px;/* For IE6 */
Pay attention to the sequence.

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

Second,Condition comment
<! -- 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 later->
<Link rel = "stylesheet" type = "text/css" href = "ie.css"/>
<! [Endif]->

Third,Css filterThe following is a classic translation from a foreign website.
Create a css style as follows:
# Item
{
Width: 200px;
Height: 200px;
Background: red;
}

Create a new div and use the css style defined above:
<Div id = "item"> some text here </div>
Add the lang attribute in the body representation. The Chinese character is zh: <body lang = "en">
Now, define another style for the div element: *: lang (en) # item {background: green! Important ;}
This is intended for use! Important overwrites the original css style. Since the lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence,
As a result, it achieves the same effect in ie6.0, but unfortunately safari does not support this attribute, so you need to add the following css style:
# Item: empty {background: green! Important}
: The empty selector is a css3 specification, although safari does not support this specification,
However, this element will still be selected. Whether or not this element exists, Green will now be available in browsers other than ie versions.
For compatibility with IE6 and FF, consider the previous! Important prefers the first method, which is concise and compatible.