IE6 Common bugs (self-summary)

Source: Internet
Author: User

The general use of the navigation can be UL to do
======================================================
CS3 rounded corners are not compatible with IE8 and the following browsers. Only use the background map to write compatibility.
=========================================================
Hack when writing a hacker, pay attention to the sequence. Normal document Flow Reading is the front-to-back
IE6: _background:green

IE7 (IE6): *background:red;


Ie8:background: \9 with spaces
IE8 (IE9): background:\9 no spaces

Compatible with all IE is suffix
IE8:background:yellow, there are spaces.
IE8 (IE9): background:black\0 no spaces

Conditional Comment: (only PNG format calls to IE6, you can use conditional annotations)

<!--[if ie6]>ie6 to see <! [endif]--> only IE6 can see


<!--[if ie7]>ie7 to see <! [endif]--> only IE7 can see

Note: IE10 does not support conditional annotations

IE6-IE9 only conditional annotations.

<!--[! Ie]>-->
Non-IE under
<!--<! [endif]-->
==================================================================

JS reference note. PNG is classname or replaced with *

<!--[If ie6]>
<script src= "Sssss.js" ></script>
<script>
Ssss.fix ('. png ');

</script>

<! [endif]-->

=====================================================================
IE6 Common Bugs

1> bilateral distance bug IE6 most famous (must remember) (IE6 exclusive)

Solution: _display:inline

2> Li's bug height increased by 3 pixels (IE6 unique bug) The key must be remembered

Li inside the sub-level floating, under the IE6 there will be a gap (IE6 unique bug) 3 pixels bug

Resolution: 1. Let Li also float up _float:left

If Li becomes a stair-shaped, Li width:100% Li is still standing on a line and not 3 pixels at the same time.

2. Add Vertical:top to Li

3> IE6 min. Height: (Must remember)

Cause of Bug

IE6 the next div has a width, the height is minimum not 0 but 12px

Workaround:
to Div height:0; and _overflow:hidden;

or height:4px _overflow:hidden;(so you can set any height under IE6, because the minimum height under IE6 is 12px;)


10> A is covered with IMG and there's a gap between IMG and the blue border. All browsers have

There's a gap between the other tags and img.

Make a into a inline block. Display:inline-block at the same time to give IMG plus Display:block

If a does not become a block, it cannot be wrapped in chunks. At this point, IMG has become a block.

img{border:0 none}


5>IE6 non-supported margin negative for children

Add position:relative to the child, not out of document flow. But the hierarchy is still high. Ha ha haha


15>png is not supported under IE6. Must Remember (IE6 exclusive)

Settlement 1.
<!--[if IE 6]>
<script src= "Js/dd_belatedpng.js" ></script>
<script>
Dd_belatedpng.fix (' * ');
Dd_belatedpng.fix (' #img1 ');
Dd_belatedpng.fix (' #img1, #img2, #img3 ');
Dd_belatedpng.fix ('. png ');
</script>
<! [endif]-->


9> Select is the highest level of display in IE6, higher than important (must remember IE6 unique)

Resolution: 1 Impersonate a Select yourself.

2 use Flash to cover the higher level of select Flash;

4> Child to open up the parent (will use the positioning, this bug generally encountered relatively little)

Resolution: Add Overflow:hidden to the parent level;



6>ie6 under Line-height failure:

Cause:
inline element and inline block element are in the same row, the line-height of the element within the row is invalidated


WORKAROUND: 1. That is, avoid row height use another way to replace

Input plus margin-top equals (parent height-input height)/2

2. Use float and then use margin to open the distance

7> Note It's best not to write it in a floating label, just in the parent's note.

Reason:
IE6 under two floating elements, width is width:100%
Add a few more words to the floating elements by annotating them.
Solve:
1. Delete the comment. But not completely, floating elements are more or will be a problem
2. Recommendation: Add _background:none to floating elements;

8>
Minimum width not supported under IE6


Workaround:
Use IE6 sub-level can open the parent of the bug, to IE6 plus _width:200px;
White-space:nowrap, (not the meaning of a newline) so that the content can open up the parent

11> opacity wide and high adaptive time IE6


Solution: To IE6 alone write _hiehgt:99999px; _overflow:hidden;

12> IE6, the anchor element is positioned next to the floating element in the same parent. The positioned element disappears
Workaround:
Remember the three elements of the float, the same level will have to float to solve

It can be solved by placing an empty block tag between the anchor element and the floating element.


13> in-line element Paddin margin does not support up or down support only around.

14> Haslayout The rendering mode under the lower version. Zoom:1 can trigger

When ul+li+a do navigation, the width cannot be set to death. can only use padding to open the time to add a zoom:1;

15> IE6, the anchor element is positioned next to the floating element in the same parent. The positioned element disappears
Workaround:
A block label between the anchor element and the floating element can be resolved.

16>
=======================================================================================

IE6 Common bugs (self-summary)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.