1. In the code, EM line write will create a blank. Remove the space between the EM tags without wrapping.
2. Use margin to set a negative value to solve the IE6 module is top line-wrapping bug.
3. Clear the Floating method: The parent element plus Overflow:hidden.
4.IE6 several block-level elements such as div and span, some not set floating some settings right float, a line of width enough to drop all block-level elements, but at this point IE6 will show the right float of one of the line
* Can exchange two parts of the code location
Cons: Breaking semantics
* Absolute positioning.
Advantages: Do not break semantics.
Disadvantage: Increase the amount of code.
* Add a float to them all.
Advantages: Ditto.
Disadvantages: can cause other bugs, and so on.
* Add hack. _margin-top:xxxxpx;
Advantages: Ditto.
Disadvantage: The use of hack.
The 5.ie6 of Li in the Display:block style will cause Li to leave white, add _display:inline to Li.
6.a contains inline elements when the blank part of the click is invalid, solution: Add a background color to a.
7.ie6 under the navigation bar Li label set the float property after the width can not be adaptive solution: The code <li> tags set float:left properties, the width of Li under IE6 can not automatically adapt,
The solution is to add the Float:left attribute to the <a> tag as well.
1, IE6 bizarre analysis of padding and border into the width of the high
Cause: Non-box model parsing without document declaration
Workaround: Add document Declaration <!doctype html>
2, IE6 in block elements, floating around, set Marin caused margin double (bilateral distance)
Workaround: Display:inline
3, the following three kinds of bugs are actually the same, in fact, is not a bug, for example: the parent tag height 20, the child label 11, vertically centered, 20-11=9,9 to the top of the text and below, how to divide? IE6 will be different from others, so try to avoid it.
1 The font size is odd, the border height is less than 1px
Workaround: The font size is set to even or line-height
2) line-height, Text vertical Center difference 1px
Solution: Padding-top Instead of Line-height Center, or line-height plus 1 or minus 1
3 with the width of the parent label of the parity between the center caused by 1px deviation
Workaround: If the parent tag is odd width, the child label also has an odd width; if it is the even width of the parent label, the child label also uses an even width
4, the internal box model exceeds the parent, the parent is propped up
Workaround: Parent tag using Overflow:hidden
5, line-height default row high bug
WORKAROUND: Line-height Set Value
6, there will be a small gap between the line label
Workaround: Float or structure side-by (poor readability, not recommended)
7, the label height can not be less than 19px
Solution: Overflow:hidden;
8. Left floating element Margin-bottom failure
Workaround: Display set height or parent label setting _padding-bottom replace child label Margin-bottom or put a label on the parent tag to float, child label
Margin-bottom, i.e. (Margin-bottom for a label when different from float)
9, IMG in block elements, the bottom of more than a blank
Workaround: Parent set Overflow:hidden; or img {display:block;} or _margin: -5px;
10, there will be spacing between Li
Solution: Float:left;
11, the block element has the text and the right floating line element, the line element wraps the line
Workaround: Place the line element in front of the text in the block element
12, position under the Left,bottom dislocation
Workaround: Set the width or add *zoom:1 for the parent (relative layer)
13, the child has set position, the parent overflow invalid
Workaround: Set position:relative for parent
Some compatibility issues with CSS selectors
2, CSS selector distinction
IE6 does not support a child selector, first use the general Declaration CSS selector for IE6, and then use a child selector for ie7+ and other browsers.
/* IE6 Dedicated * *
. content {color:red;}
* * Other Browsers * *
Div>p. Content {color:blue;}-->
3, PNG translucent picture of the problem
Although can be through JS and other ways to solve, but there are still loading speed and so on, so the design can be avoided or try to avoid as well. To achieve maximum optimization of the website.
4. Rounded corners under IE6
IE6 does not support CSS3 properties, the most cost-effective solution is to use the picture rounded corners to replace, or give up the IE6 corner.
5, IE6 background flashing
If you use CSS sprites as a background for links and buttons, you may find that background images flicker under IE6. The reason for this is that because IE6 does not cache the background map, it reloads every time the hover is triggered, and you can use JavaScript settings IE6 cache these pictures:
Here's the code:
Document.execcommand ("Backgroundimagecache", false,true);
6. Minimum height
IE6 does not support the Min-height attribute, but it thinks that height is the minimum height. WORKAROUND: Use IE6 not supported properties!important that are supported by the rest of the browsers.
The code is as follows:
#container {min-height:200px; Height:auto!important; height:200px;}
7. Maximum Height
The code is as follows:
Use IDs directly to change the maximum height of an element
var container = document.getElementById (' container ');
Container.style.height = (Container.scrollheight > 199)? "200px": "Auto";
Write a function to run
function Setmaxheight (elementid, height) {
var container = document.getElementById (ElementID);
Container.style.height = (Container.scrollheight > (height-1))? Height + "px": "Auto";
}
Examples of functions
Setmaxheight (' Container1 ', 200);
Setmaxheight (' Container2 ', 500);
8, 100% height
Under IE6, if you want to define 100% heights for an element, you must explicitly define the height of its parent element, and if you need to define the full screen height of the element, first define the HTML and the body height:100%;.
9. Minimum width
Like Max-height and Max-width, IE6 does not support min-width.
The code is as follows:
Use ID directly to change the maximum width of an element
var container = document.getElementById (ElementID);
Container.style.width = (Container.clientwidth > (width-1))? width + "px": "Auto";
Write a function to run
function Setmaxwidth (elementid, width) {
var container = document.getElementById (ElementID);
Container.style.width = (Container.clientwidth > (width-1))? width + "px": "Auto";
}
Examples of functions
Setmaxwidth (' Container1 ', 200);
Setmaxwidth (' Container2 ', 500);
Use ID directly to change the minimum width of an element
var container = document.getElementById (' container ');
Container.style.width = (Container.clientwidth < width)? "500px": "Auto";
Write a function to run
function Setminwidth (elementid, width) {
var container = document.getElementById (ElementID);
Container.style.width = (Container.clientwidth < width)? width + "px": "Auto";
}
Examples of functions
Setminwidth (' Container1 ', 200);
Setminwidth (' Container2 ', 500);
10, the maximum width
The code is as follows:
Use ID directly to change the maximum width of an element
var container = document.getElementById (ElementID);
Container.style.width = (Container.clientwidth > (width-1))? width + "px": "Auto";
Write a function to run
function Setmaxwidth (elementid, width) {
var container = document.getElementById (ElementID);
Container.style.width = (Container.clientwidth > (width-1))? width + "px": "Auto";
}
Examples of functions
Setmaxwidth (' Container1 ', 200);
Setmaxwidth (' Container2 ', 500);
11, bilateral distance bug
When the element floats, the IE6 incorrectly calculates the margin value of the floating direction twice. Personally think the better solution is to avoid float and margin at the same time.
12, clear floating
If you want to wrap a floating element with a div (or other container), you'll find that the div (container) must have a well-defined height, width, and overflow attribute (except for the auto value) to wrap the floating element securely.
The code is as follows:
#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background: #00F;}
#floated2 {float:right; height:400px; width:200px; background: #F0F;}
MORE: http://www.twinsenliang.net/skill/20090413.html
13, floating layer dislocation
When the content exceeds the width defined by the outsourced container, the container ignores the defined width value in the IE6, and the width is incorrectly increased with the width of the content.
Floating layer dislocation problem under IE6 there is no real satisfactory solution, although it can be used overflow:hidden; or overflow:scroll to fix, but hidden easily lead to other problems, scroll will destroy the design ; JavaScript does not solve the problem very well. So the suggestion is to avoid this problem in the layout, use a fixed layout or control the width of the content (add width to the inner layer).
14. Hide and Seek bugs
Under IE6 and IE7, Hide-and-seek bugs are a very annoying problem. A floating element that breaks the container, if there is no floating content after him, and there are some definitions: hover links, and when the mouse moves over those links, it triggers Hide-and-seek under IE6.
The solution is simple:
1. Add a <span style= "Clear:both" after the content (that is not floating); > </span>
2. A simple way to trigger the haslayout of a container containing these links is to define the height:1%;
15, absolute positioning elements of the 1 pixel spacing bug
This error under IE6 is due to a carry processing error (IE7 has been repaired), and bottom and right produce an error when the parent element of an absolutely positioned element is a high or a wide-numbered one. The only solution is to give the parent element a well-defined high-width value, but there is no perfect solution for the liquid layout.
16, 3 pixel spacing bug
In IE6, when the text (or no floating element) follows a floating element, there is a 3-pixel interval between the text and the floating element.
Add display:inline and -3px negative values to the floating layer margin
Define margin-right for the middle content layer to correct -3px
17, ie under the Z-index bug
In IE browser, the z-index level of the positioning element is relative to the respective parent container, which causes the z-index to behave incorrectly. The workaround is to define Z-INDEX for its parent element and, in some cases, to define position:relative.
18, Overflow Bug
In IE6/7, overflow cannot properly hide the child elements of a relative positioning position:relative. The solution is to outsource the container. Wrap plus position:relative;.
19. Horizontal List width bug
If you use Float:left <li> horizontally, and the <a> (or other) contained in <li> triggers haslayout, there will be false performance under IE6. The solution is simple, just give <a> define the same float:left;
20. List Ladder Bug
List ladder bugs are usually triggered when you give <li> child elements <a> use Float:left, and we mean to make a horizontal list (usually a navigation bar), but IE may appear either vertically or as a ladder. The solution is to define float:left for <li>, not child elements <a>, or to define display:inline for <li>, or to resolve.
21. Vertical list Gap Bug
When we use <li> contains a block-level child element, IE6 (IE7) incorrectly adds a gap between each list element (<li>).
Solution: To solve this problem by <a>flaot and clearing float, another way is to trigger <a> haslayout (such as defining width, using zoom:1;), or to define display for <li>: Inline to solve the problem; there is also a very interesting way to add a space to the end of the included text.
22, in the IE6: hover
In IE6, in addition to (the need for HREF attribute) can trigger: hover behavior, which prevents us to achieve many mouse touch effect, but there are some ways to solve it. It is best not to use: hover to achieve important functions, only use it to enhance the effect.
23, IE6 Adjust the size of the window Bug
When the body is centered, changing the size of IE browser, any relative positioning elements within the body will not be fixed. Solution: Define position:relative for the body; it's OK.
24, the text repeats the bug
In IE6, some hidden elements, such as annotations, Display:none elements, are included in a floating element, and it is possible to raise text-repeating bugs. Workaround: Add display:inline to the floating element;.
The above lists some of the bugs that are often encountered under our IE6 and solutions that we hope will help you.
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
