CSS browser compatibility problem set (1)

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 Web, try to write code in xhtml format, and DOCTYPE affects CSS processing. As the W3C standard, DOCTYPE must be well known.

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 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 putLabel, 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}





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"> & lt; # 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 & lt; # div class = "clear"> the position between <# div class = "floatB"> <# div class = "NOTfloatC">, 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 external wrapper div. In order to make the height automatically adapt, overflow: hidden should be added to the wrapper; when the box containing float is included, 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:





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, so we should solve this problem.







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