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)