Sorting out the most comprehensive CSS browser compatibility issues (ie6.0, ie7.0, and Firefox)

From: http://www.yoyopo.cn/post/252/

CSS compatibility with browsers 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. Solve the problem of compatibility with fireofx and sort it out. for over 2. 0, try to write in XHTML format.CodeAnd doctype affects CSS processing. as W3C standard, doctype must be added.

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; // achieves the same row arrangement effect. diplay: Table ;}

4 issues with IE and width and height

IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all.
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, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually uses width as the minimum width. To enable this command to be used on IE, you can

Put in

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

Float on the left side of the object. The left margin of the outer patch is used on the right side to locate the object. The text in the right side will be 3 px away from the left side. # 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;

① For example, <# Div id = "floata"> <# Div id = "floatb"> <# Div id = "notfloatc"> the notfloatc here does not want to continue translation, instead, we want to move it down. (Floata and floatb attributes have been set to 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 must be closed. Add <# Div class = "floatb"> <# Div class = "notfloatc"> <# Div class = "clear"> the position of the div, it must be at the same level as the two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception occurs. And define the clear style as follows:. Clear {clear: Both ;}

② Do not set the height of the DIV that is used as an external wrapper. In order to make the height automatically fit, overflow: hidden should be added to the wrapper. When the box contains float, the height auto-fit is invalid in IE. In this case, the private attribute layout 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: <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 make the background color of all three columns blue, but we will find that as the left center right is stretched down, the storage height of the page remains unchanged. The problem is that the page is not a float attribute. Because the page is centered, it cannot be set to float, therefore, we should solve <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>

Embed a float left and the DIV with a width of 100%.

④ Universal float closure (very important !)
For details about the principle of clear float, refer to [How to clear floats without structural markup]. Add the following code to global CSS and add class = "Clearfix" to the DIV to be closed, tried and tested. /* 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?

There are also many ways to solve this bug. You can change the HTML layout, set IMG to display: block, or set vertical-align to vertical-align: top | bottom | Middle | both text and bottom can be solved.

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 set transparency for flash. <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>

I still don't quite understand which standard IE8 currently implements on compatibility. It seems very confusing. Many pages with good compatibility (including pages compatible with ie5, IE6, IE7, and ff) there will be some broken pages in IE8 to varying degrees
Simply do not write code for IE8 alone. Add a line in the head Tag: <meta http-equiv = "X-UA-compatible" content = "Ie = 7"/>

IE8 can be parsed in IE7 mode.