Home > Developer > JavaScript
Internet Explorer compatibility (II)-FAQs about Internet Explorer 6 and Internet Explorer 6
IE6 FAQs1,Box Model Problems(1)DTD Problems
DTD: Document definition type, which specifies the writing specifications to be followed.
If you do not write a DTD, the advanced browser can still load normally, and IE6 will load in weird mode.
Box Model: Normally it should be extended (the actual placeholder will become larger due to the addition of padding and border). IE6 does not write the DTD and is reduced internally (the actual placeholder remains unchanged, padding and border are inwards ).
This is also one of the compatibility issues of HTML5.
Solution: you must write a DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Boxes smaller than the text font size
If you do not set the text font size, IE6 does not support boxes with a height lower than 19px. If the setting height is lower than 19px, it is displayed as 19px.
Solution:
① Set the internal font size of the box to 0. Font-size: 0;
② Set the height of the box and hide the overflow height. Overflow: hidden;
(3) Border of the image in tag
If an image (img tag) is inserted, the outer layer is nested with the tag, and the image in IE6 has a blue border.
To remove the border, clear the default img style.
Whether or not the img image is placed in the label, clear the border style for the img image and set the border of the img to 0 or none.
(4) Gaps under images in block-level labels
If an img label is nested in a block-level element, the advanced browser is automatically opened by the image. When IE6 is opened, there is a longer distance at the bottom.
Solution:
Convert img images into blocks. Display: block
Alternatively, you can add a height to the parent element to hide it.
2, Floating(1) Elements that do not float will not be drilled empty
If an element of the same level floats and one element does not float, the floating element should let the standard stream position, and the element behind it occupies this position.
In advanced browsers, there is no floating covered by float.
IE6 is not covered, but is horizontally arranged.
Solution:
① The elements of the same level must be floating, but not part of the elements.
② Make the CAP effect. Do not use float for positioning.
(2) 3-pixel bug
One element floats, and one element does not float. In addition to side-by-side display, there is a 3px gap between the two elements.
Solution:
① It cannot be either floating or not floating.
② If one floating element is required, the 3-pixel bug should also be solved: add the margin value to the floating element as-3px to bring the distance closer.
(3) Double Margin Problems
If a group of elements are all floating, and each element has the same direction of the margin-left margin, in IE6, the margin distance between the first HTML element and the parent is twice the set value.
Solution:
① Do not use the child-level margin to fool the father. The distance between the father and the child is squeezed out using the parent-level padding. Each child element is set with the outer margin opposite to the floating direction.
ul{ list-style: none; width: 980px; height: 50px; padding-left: 20px; border: 5px solid red; margin: 100px auto; } ul li{ float: left; width: 100px; height: 50px; background: yellowgreen; margin-right: 20px; }
② Set the outer margin of the first element to half for IE6 separately. The default value is the original value for other browsers. The halved value in IE6 is automatically doubled.
ul li{ float: left; width: 100px; height: 50px; background: yellowgreen; margin-left: 20px; } ul li.first{ _margin-left: 10px; }
(4) Overflow hidden clear floating invalid
Overflow: When the hidden attribute is cleared, IE6 may become invalid.
If the width and height are not set, the floating effect becomes invalid.
Solution:
Set the width of the parent box: Clear the floating effect.
When a browser loads a webpage, there are two layout loading mechanisms.
There is a layout mechanism: hasLayout. When an element is loaded, its own size is loaded according to the internal child element, content, and its own size attributes.
No layout mechanism: When an element is loaded, the relevant size is loaded according to the size of the parent element.
If overflow is used to hide and clear floating, the value of the parent element should be determined by the value of the child element, which complies with the layout mechanism.
To hide and clear floating with overflow: triggers the hasLayout mechanism.
Trigger method: You can set the attributes of the parent box with the length and value to trigger. Not all attributes with numeric values can trigger the success mechanism each time.
There is a property called zoom that can always trigger a layout mechanism.
Zoom: magnifiers. Zoom in and out the properties of the box.
Attribute Value: Number.
Zoom in or out the display according to the original width and height of the box. You must know the original size of the box.
To help clear floating attributes: the attribute value must be 1.
Div {border: 10px solid red; overflow: hidden; _ zoom: 1; only IE6 loaded}
3, Fixed Positioning
The Internet Explorer 6 does not support fixed positioning.
Solution: Use js to simulate fixed positioning.
.box{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px; background: red; position: fixed; top: 50%; left: 50%; _position:absolute; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.clientHeight/2); _left:expression(document.documentElement.clientWidth/2-this.clientWidth/2); }
4, Box transparency
The opacity box transparency attribute has compatibility issues in IE8 and below.
Solution: IE browser has its own transparency setting attribute.
Filter: filter.
Attribute Value: There are many filter effect attribute values, and the transparency attribute is only one of them.
Transparency settings:
Value: an integer between 0 and 20%. 20 indicates that the transparency is 0.2, which is equivalent to of opacity.
The two values must be consistent.
opacity：0.2；filter: alpha(opacity=20);
5, Image transparency
Insert into image and background image.
Images with transparent Background: png and GIF.
IE6: transparent and translucent png images of background images and inserted images are not supported.
Solution:
① If the image is transparent and not translucent, you can replace it with a png Image in GIF format.
② Add a piece of js code to the IE 6 browser to solve the problem of transparency and transparency.
<! -- [If IE 6]> <script src = "js/iepng. js "type =" text/javascript "> </script> // js file path, which must be written. <Script type = "text/javascript"> EvPNG. fix ('div, ul, img, li, input, span, B, h1, h2, h3, h4 '); // The selector that processes the image's transparent labels. </Script> <! [Endif] -->
Note: It is best to write this code at the end of the HTML structure.
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
