1. Force the browser to use standard web resolution (the web is all parsed to 4.01, and I don't know if there are 5 ..)
HTML Format
<! Doctype HTML public "-// W3C // dtd html 4.01 // en"
"Http://www.w3.org/tr/html4/strict.dtd">
Or XHTML writing
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
"Http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
2. CSS selector Differentiation
IE6 does not support sub-selectors. It first uses the regular declarative CSS selector for IE6, and then uses the sub-selector for IE7 + and other browsers.
Content {color: red ;}
Div> P. Content {color: Blue;}->
3. Problems with PNG translucent Images
Although it can be solved through JS and other methods, there are still problems such as loading speed. Therefore, this can be avoided as much as possible in the design. To achieve the maximum optimization of the website.
4. rounded corners under IE6
IE6 does not support the rounded corner attribute of css3. The most cost-effective solution is to use the rounded corner of the image instead (layer-3 nesting) or discard the rounded corner of IE6.
5. IE6 background flashing
If you use CSS Sprites as the background for links and buttons, you may find that the background image flashes in ie6. This is because IE6 does not cache the background image and will be reloaded every time the hover is triggered. You can use JavaScript to set IE6 to cache these images:
Document.exe ccommand ("backgroundimagecache", false, true );
6. Minimum Height
IE6 does not support the Min-height attribute, but considers the height as the minimum height. Solution: use properties not supported by IE6 but supported by other browsers! Important. # Container {Min-Height: 200px; Height: Auto! Important; Height: 200px ;}
7. maximum height
// Directly use ID to change the maximum height of an element
VaR Container = Document. getelementbyidx_x ('Container ');
Container. style. Height = (container. scrollheight> 199 )? "200px": "auto ";
// Write as a function to run
Function setmaxheight (elementid, height ){
VaR Container = Document. getelementbyidx_x (elementid );
Container. style. Height = (container. scrollheight> (height-1 ))? Height + "PX": "Auto ";
}
// Function example
Setmaxheight ('Container', 200 );
Setmaxheight ('ininer2', 500 );
8.100% height
In IE6, if you want to define a 100% height for an element, you must clearly define the height of its parent element. If you want to define a full screen height for an element, you must first define the height: 100%; for HTML and body ;.
9. Minimum Width
Like Max-height and max-width, IE6 does not support Min-width.
// Use ID directly to change the minimum width of an element
VaR Container = Document. getelementbyidx_x ('Container ');
Container. style. width = (container. clientwidth <width )? "500px": "auto ";
// Write as a function to run
Function setminwidth (elementid, width ){
VaR Container = Document. getelementbyidx_x (elementid );
Container. style. width = (container. clientwidth <width )? Width + "PX": "Auto ";
}
// Function example
Setminwidth ('eriner1', 200 );
Setminwidth ('ininer2', 500 );
10. Maximum Width
// Directly use ID to change the maximum width of an element
VaR Container = Document. getelementbyidx_x (elementid );
Container. style. width = (container. clientwidth> (width-1 ))? Width + "PX": "Auto ";
// Write as a function to run
Function setmaxwidth (elementid, width ){
VaR Container = Document. getelementbyidx_x (elementid );
Container. style. width = (container. clientwidth> (width-1 ))? Width + "PX": "Auto ";
}
// Function example
Setmaxwidth ('eriner1', 200 );
Setmaxwidth ('ininer2', 500 );
11. Bilateral distance bug
For floating elements in IE6, double blank edges are inexplicably added, and the solution is also inexplicable. Setting the display: inline attribute is fine, and there is no significance for the float element attribute.
12. Clear floating
If you want to use Div (or other containers) to wrap a floating element, you will find that you must give Div (container) A defined attribute (except the auto value) in height, width, and overflow can strictly enclose floating elements.
13. floating layer dislocation
When the content exceeds the width defined by the outsourcing container, in IE6, the container ignores the defined width value, and the width increases incorrectly with the content width. There is no satisfactory solution to the floating layer dislocation problem in IE6. Although overflow: hidden; or overflow: Scroll; can be used to fix it, hidden is prone to other problems, scroll breaks the design, and JavaScript cannot solve this problem well. Therefore, we recommend that you avoid this problem in layout. Use a fixed layout or control the width of the content (add width to the inner layer ).
14. Dodge bug
In IE6 and ie7. A floating element that breaks through the container. If there is a non-floating content after it, and there are some definitions: hover links, when the mouse moves over those links, in ie6.
The solution is simple:
1. Add a <span style = "clear: Both;"> </span>
2. Trigger haslayout of the container containing these links. A simple method is to define Height: 1% for the container;
15. 1 pixel spacing bug of absolute positioning Elements
This error in IE6 is caused by the carry processing error (IE7 has been fixed). When the parent element of the absolute positioning element is high or the width is odd, bottom and right generate an error, the solution is to use even values for width and height.
16.3 pixel spacing bug
In IE6, when the text (or non-floating element) follows a floating element, there will be an additional 3 pixel interval between the text and the floating element.
Add a negative value of "display: inline" and "-3px" to the floating layer.
Define margin-right for the intermediate content layer to correct-3px.
17. Z-index bug in IE
In IE browser, the Z-index level of the positioning element is relative to the parent container of the corresponding element, which leads to an error in Z-index. The solution is to define the Z-index for its parent element. In some cases, you also need to define position: relative.
18. overflow: hidden expired
When the style of the parent or child element has the position: relative attribute, the overflow: hidden attribute of the parent element becomes invalid. It's easy to solve this bug. Use Position: relative in the parent element;
19. Horizontal list width bug
If you use float: Left; To set the <li> horizontal column, and <A> (or other) contained in <li> triggers haslayout, in IE6, errors may occur. The solution is simple. You only need to define the same float: Left; For <A>.
20. List tier bug
A list tier bug is usually triggered when <A> float: Left; is used for the <li> sub-element. We intend to create a horizontal list (usually the navigation bar ), however, ie may be vertical or tiered. The solution is to define float: left for <li> instead of sub-elements <A>, or define display: Inline for <li>.
21. Vertical list gap bug
When we use <li> to include a block-level sub-element, IE6 (which may also be possible in IE7) Incorrectly adds gaps between each list element (<li>.
Solution: Set <A> flaot and clear float to solve this problem. Another method is to trigger <A> haslayout (such as setting the height and width, using ZOOM: 1 ;); you can also define <li> display: inline; to solve this problem. In addition, it is very interesting to add a space at the end of the included text.
22. Text duplication bug
In IE6, some hidden elements (such as comments and display: none; elements) are included in a floating element, which may lead to a text repetition bug. Solution: Add display: inline; to the floating element ;.
23. IE6 window size adjustment bug
When the body is placed in the center and the size of the IE browser is changed, any relative positioning element in the body will remain unchanged. Solution:
Define position: relative; for the body.
Internet Explorer 6 bug and Solution
