Sorting out the most comprehensive CSS browser compatibility issues

Source: Internet
Author: User

CSS
Browser compatibility is sometimes a headache. Maybe when you understand the skills and principles, you will feel that it is not difficult to collect IE7 from the Internet, 6. Solutions for compatibility with fireofx have been sorted out.
For over 2. 0, try to write in XHTML format.CodeAnd doctype affects CSS processing. as W3C standard, doctype must be added.
Name.

CSS skills

1. Vertical center of Div

Vertical-align: middle; Increase the line spacing to the line-Height: 200px as high as the entire div; then insert the text to center vertically. The disadvantage is that you need to control the content rather than line feed.

2. Question about doubling margin

The DIV set to float doubles the margin set in IE. This is a bug in IE6. The solution is to add the display: inline In the div;
For example:
<# Div id = "imfloat">
The corresponding CSS is
# Iamfloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */}

3. Double distance produced by floating IE

# Box {float: Left; width: 100px; margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // ignore floating}
Here, let's take a closer look at the block and inline elements: the block elements always start on a new line, and can be controlled by the height, width, row height, and margin (block element ); the Inline element is not controllable (embedded element) on the same line as other elements );
# Box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: Table;

4 issues with IE and width and height

IE

I don't know the definition of Min-, but it actually treats the normal width and height as Min. In this case, the problem is big. If only the width and height are used
If only Min-width and Min-height are used, the width and height under IE are not set.
For example, to set a background image, the width is 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 page width

Min

-Width is a very convenient CSS command. It can specify the minimum or less width of an element, so that the layout is always correct. However, ie does not recognize this, but it actually treats width
Make the minimum width. To enable this command to be used on IE, you can put <div> in <body>
Label, specify a class for the DIV, and CSS is designed as follows:
# 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 is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.

6. The bug that DIV floating ie text produces 3 pixels

The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px 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 critical}
<Div id = "box">
<Div id = "Left"> </div>
<Div id = "right"> </div>
</Div>

7. Questions about Internet Explorer

When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.
Some content cannot be displayed. When you select this area, the content is displayed on the page. Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.

8. Float Div closure; clear floating; adaptive height;


Example: <# Div id = "floata"> <# Div id = "floatb"> <# Div id ="
Notfloatc "> the notfloatc here does not want to continue translation, but wants to move down. (The attributes of floata and floatb have been set
Float: Left ;)
This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label, and the float label must be
Closed. Add <# Div class = "floatb"> <# Div class = "notfloatc">
# Div
Class = "clear"> This Div must pay attention to its position and must be at the same level as the two DIV with the float attribute. No nested relationship exists between them. Otherwise
Exception. And define the clear style as follows:. Clear {clear: Both ;}

② as an external
do not set the height of the wrapper Div. To enable automatic height adaptation, add overflow: hidden to the wrapper; when the
box containing float is highly automatically adapted to the IE environment, it is invalid. In this case, the layout private attribute of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.
for example, a wrapper is defined as follows:
. colwrapper {overflow: hidden; ZOOM: 1; margin: 5px auto;}

③ for typographical layout, the most commonly used CSS description may be float: left. sometimes we need to make a unified background behind the float DIV in the N column, for example:





comparison
if you want to set the page background to blue, the background color of all three columns is blue, but we will find that the left center right is stretched down, And the
page actually keeps the height unchanged, the reason is that the page is not a float attribute, and because the page is centered, it cannot be set to float, so we should solve this problem as follows:





embed a float left and a div with a width of 100%.

④ Universal float closure (very important !)
Off
For the principle of clear float, see [How to clear floats without structural
Markup], add the following code to global CSS, and add class = "Clearfix" to the DIV 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 */
Alternatively, set. hackbox {display: Table; // display the object as a table at the block element level}

11. highly unsuitable

Height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer 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> content in the p object </P>
</Div>
Solution: Add two empty Div objects to the upper and lower sides of the P object. CSS code:. 1 {Height: 0px; overflow: hidden;} or add the border attribute to the div.

12. Why is there a gap in the image under IE6?

Solution
There are also many ways to solve this bug, which can be to change the HTML layout, set IMG to display: block, or set vertical-align.
The attribute is vertical-align: Top | bottom | Middle | text-bottom.

13. Align text and text input boxes

Add vertical-align: middle;
<Style type = "text/CSS">
<! --
Input {
Width: 200px;
Height: 30px;
Border: 1px solid red;
Vertical-align: middle;
}
-->
</Style>

14. What is the difference between ID and class defined in web standards?

I. duplicate IDs are not allowed in web standards. For example, div id = "AA" cannot be repeated twice, while class defines classes, which can be infinitely repeated in theory, in this way, you can use the definition that requires multiple references.

Ii. attribute priority
The priority of ID is higher than that of class.

III. convenience for JS and other client scripts. If you want to perform script operations on an object on the page, you can define an ID for it. Otherwise, you can only find it by traversing the page element and adding specific attributes, this is a relatively time-consuming resource, which is far less simple than an ID.

15. How to display the content in Li with ellipsis after the content length exceeds

This method is applicable to IE and opbrowser.

<Style type = "text/CSS">
<! --
Li {
Width: 200px;
White-space: nowrap;
Text-overflow: ellipsis;
-O-text-overflow: ellipsis;
Overflow: hidden;
}

-->
</Style>

16. Why can't I set the color of the scroll bar in Web Standard ie?

The solution is to change the body to 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>

17. Why cannot I define a container with a height of around 1 px?

In IE6, this problem is caused by the default Row Height, and there are many solutions, such as overflow: hidden | ZOOM: 0.08 | Line-Height: 1px.

18. How can I display layers on flash?

The solution is to make flash transparent.
<Param name = "wmode" value = "Transparent"/>

19. How to center a layer vertically in the browser

Here we use the absolute percentage position, and the method of negative value of the external patch, the negative value is its own width and 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>

Ff and IE

1. Div Center

If the DIV sets margin-left and margin-Right to auto, it is already centered. If IE is not, you need 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. Border and background of the Link (a tag)

A
Add the border and background color to the link. Set display: block and float: left to avoid line breaks. For more information, see menubar.
Menubar sets the height to avoid misplacement of the bottom side. If the height is not set, you can insert a space in menubar.

3. Problems with the hover style after hyperlink access

Click to access the hyperlink style is not with Hover and active, many people should have encountered this problem, the solution is to change the CSS attribute order: L-V-H-A
Code:
<Style type = "text/CSS">
<! --
A: link {}
A: visited {}
A: hover {}
A: active {}
-->
</Style>

4. cursor

Cursor: pointer can display the cursor finger shape in IE ff at the same time, hand only ie Can

5. UL's padding and margin

UL labels have padding values by default in FF, while only margin has default values in IE. Therefore, UL {margin: 0; padding: 0;} is defined first ;} most problems can be solved.

6. Form tag

This
Labels in IE will automatically margin some margins, while in FF margin is 0. Therefore, if you want to display the same, you 'd better specify the margin and
Padding: For the above two problems, I usually use this style ul in CSS first, FORM {margin: 0; padding: 0;} to define it, so after
It won't be a headache.

7. Inconsistency of Box Model Interpretation

In ff and IE
The box model interpretation in is inconsistent, resulting in a 2px difference solution: div {margin: 30px! Important; margin: 28px;} note the two
The margin sequence must not be reversed. The important attribute ie cannot be identified, but other browsers can recognize it. So in IE, it is actually explained as follows: div
{Maring: 30px; margin: 28px} is repeatedly defined as 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 incompatible and is a bug in hiding CSS)

P [ID] {} Div [ID] {}
This is hidden for versions earlier than ie6.0 and ie6.0, and works with ff and opera. there is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as 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, but IE will ignore it.
. 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. Questions about default values of IE and FF

Or
Maybe you have been complaining about why you want to write different CSS for IE and FF, why is it so troublesome for IE, and then write CSS while cursing the hateful M $
Ie. In fact, the CSS Standard
In terms of quasi-support, 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
Difficult. Maybe you don't need simple CSS "! Important.
We all know that when a browser displays a webpage
CSS style sheets determine how to display them. However, we may not describe all the elements in the style sheets. Of course, this is not necessary, so for those attributes that are not described, the browser will
Display in the built-in default mode, such as text. If you do not specify a color in CSS, the browser will use black or system color to display the background of Div or other elements, if
CSS is not specified, the browser sets it to white or transparent, and so on other undefined styles. So the root cause of the difference between FF and IE display is that their default display
The 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 can't the FF text support the height of the container?

Containers with fixed height values in the standard browser won't be opened as in IE6, so 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 for height. Here, we can define this to take care of IE6 that does not know Min-height:

{
Height: Auto! Important;
Height: 200px;
Min-Height: 200px;
}

12. How to enable automatic line feed for continuous long fields in Firefox

As we all know, you can use Word-wrap: Break-word directly in IE. In ff, we use JS insertion to solve this problem.

<Style type = "text/CSS">
<! --
Div {
Width: 300px;
Word-wrap: Break-word;
Border: 1px solid red;
}
-->
</Style>

<Div

Id = "FF"> commandid </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 is the container width and FF interpretation different under IE6?

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

Question
The difference is whether the overall width of the container includes the width of the border (Border). Here IE6 is interpreted as 200px.
And 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 of IE.
Mode. For more information about qurks mode and standards mode, see http:
// Www.microsoft.com/china/msdn/library/webservices/asp.net/
Aspnetusstan. mspx? MFR = true

IE6, IE7, FF

Ie7.0
There are new problems with CSS support. When there are more browsers and the webpage compatibility is worse, we are still exhausted. To solve the problem of ie7.0 compatibility, I found the following article.Article:
Now I am big
Some are used! Important comes to hack. It can be displayed normally for IE6 and Firefox tests, but IE7 is correct! Important can be correctly interpreted, causing the page to fail
Display as required! The following shows the compatibility of the three browsers.

The first is the CSS hack method.

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

The second method is to use conditional annotations dedicated to 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 later -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/>
<! [Endif] -->

Third, the CSS Filter method, which is translated from a foreign website as a classic ..

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. Because the Lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence, so it achieves the same effect in ie6.0, 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, this element is still selected, whether or not this element exists, now green will 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.

A good memory is worse than a bad blog
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.