1.ie6, the fast element has a floating, and horizontal margin, the horizontal margin value will be magnified to twice times
Solution: Set the fast element display to inline;
2.ie6,7 next few PX gap problems
Under ie6,7 Li itself does not float, but the content floats will be more than a few PX gap
Resolution: (1) Li plus floating
(2) to Li plus vertical-align plus top/bottom//Vertical alignment
3.ie6,7 Minimum height problem:
Solution: (1) font-size:0//Clear IE6 minimum height is 19px, but font-size minimum is 2Px, the effect is poor;
(2) Overflow:hidden
Vertical centering problem for 4.div
Vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line
5. Question of margin doubling
A div set to float doubles the margin set under IE. This is a bug that exists in a IE6. The solution is to add display:inline to this div;
For example:< #div id= "imfloat" > corresponding CSS for #IamFloat {float:left; Margin:5px;/*ie understood as 10px*/display:inline;/*ie and understood as 5px*/}
6. Double the distance generated by the floating IE
#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}
Here's a look at block and inline two elements: The block element is characterized by always starting on new lines, height, width, row height, margin can be controlled (block elements); The inline element is characterized by an uncontrolled (inline element) on the same line as other elements; #box {display:block;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;
7 ie with width and height issues
IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This is a big problem, if only the width and height of the normal browser these two values will not change,
If you use only min-width and min-height, ie below is basically not set width and height. For example, to set the background image, this width is more important. To solve this problem,
Can do this: #box {width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}
8. Minimum width of the page
Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. In order for this command to work on IE, you can put a <div> into the <body> tab, then specify a class for the Div, and then the CSS is designed like this:
#container {min-width:600px; Width:e-xpression (Document.body.clientWidth < 600?) "600px": "Auto");} The first min-width is normal;
But the width of line 2nd uses Javascript, which only IE recognizes, which will make your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.
9.DIV floating IE text generates 3 pixel bug
The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px 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 key} <div id= "box" > <div id= "left" ></div> <div id= "righ T "></div> </div>
10.IE Hide and seek problem
When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems. Some content does not show up when the mouse selects this area is found content is indeed on the page.
WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
IE6/7 FAQ Collection and resolution (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
