About IE6, IE7 compatibility summary

In fact, the browser is incompatible, we tend to be different browsers for some standard definition of inconsistency caused, so we can do some initialization, many problems are easy to solve.

Here are 14 special cases for reference only:

1. The size of the text itself is not compatible. The same is the font-size:14px text, in different browsers occupy the space is not the same, ie under the actual account of 16px, under the white 3px,ff under the actual high 17px, left white 1px, under the white 3px,opera under the same. Solution: Set the text to Line-height. Make sure that all text has a default line-height value. This is important and we cannot tolerate 1px differences in height.

2.ff under the height of the container, that is, the container defines the height, the shape of the container border is determined, will not be content to support large, and IE will be the content of the large, high-limit failure. So don't make it easy to define height for the container.

3. The problem of bursting the container horizontally. If the float container does not have a defined width, the contents of the FF are as open as possible to the container width, and the content wrapping is preferred under IE. Therefore, the content may burst the floating container needs to define the width.

Small experiment: We are interested to see this experiment. Test the following code separately under different browsers.

A.<div style= "border:1px solid red;height:10px" ></div> B. <div style= "border:1px solid red;width:10px" ></div>

C. <div style= "border:1px solid Red;float:left" ></div> D. <div style= "border:1px solid Red;overflow: Hidden "></div>

The above code in different browsers is not the same, the experiment originated from the use of small height value Div, <div style= "Height:10px;overflow:hidden" &GT;&LT;/DIV&GT;, small height Values to be used in conjunction with Overflow:hidden. The experiment is fun, to illustrate, the browser to the container boundary interpretation is very different, the contents of the container affect the results are different.


4. The most hated, Double-margin bug. IE6 the floating container is defined margin-left or margin-right the actual effect is twice times the value. Solution to define the display:inline for the floating container.

5.mirror margin bug, when the outer element has a float element, the outer element, such as defining margin-top:14px, will automatically generate MARGIN-BOTTOM:14PX. Padding will also appear similar problems, are IE6 under the special products, the situation of such bugs is more complex, far more than this one of the conditions, has not been systematically organized. Solution: The outer element is set to border or set float.

Extension: The Margin-bottom,padding-bottom interpretation of containers under FF and IE is sometimes inconsistent and seems to be relevant.

6. Devouring the phenomenon. Or IE6, up and down two Div, the above div set the background, but found that the following does not set the background of the DIV also has a background, this is the devouring phenomenon. Corresponding to the above background devouring phenomenon, there is the phenomenon of scrolling down the border missing. Solution: Use Zoom:1. This zoom seems to be specifically designed to solve IE6 bugs.

7. Annotations can also produce bug~~~ "more than one pig." "This is the previous summary of the use of this bug copy, IE6 this bug, we will see in the page pig word appeared two times, the amount of repeated content due to the number of comments change." Solution: Use "<!–[if!" Ie]> picrotate Start <! [endif]–> "method to write a comment.


8.img under the white, we look at this code is what the problem:

<div>

</div>

To open the div's border, you find that the bottom of the picture is not close to the bottom of the container, is an img behind the white space character, to eliminate the need to write

<div>
</div>

The last two labels are next to each other. This bug still exists under IE7. Solution: Set Display:block to IMG.

9. Loss of Line-height. <div style= "line-height:20px" > text </div> Unfortunately, the single-line text IE6 effect disappears in line-height ... , because This inline-block element and the inline element are written together. Solution: let img and text float together.

Extension: You know that img align have text-top,middle,absmiddle ah what, you can try to adjust the IMG and text so that they can be consistent under IE and FF, you will find how the tune will not let you satisfied. Simply let img and text are float up, with margin adjustment.


The 10.clear layer should be used alone. Maybe you want to save the code to put the clear attribute directly to a content layer below, so there is a problem, not only FF and OP lost the margin effect, ie some margin value will also be invalidated
<div style= "Background:red;float:left;" >dd</div>
<div style= "Clear:both;margin-top:18px;background:green" >ff</div>

11.ie Overflow:hidden is not valid for absolute layer position:absolute or relative layer position:relative under it. Solution: Add position:relative or Position:absolute to Overflow:hidden. In addition, IE6 supports Overflow-x or overflow-y features, IE7, FF does not support.

12.ie6 a serious bug,float element without a defined width, if the inner div defines the height or zoom:1, the DIV will fill a whole line, even if you give the width. The float element should be given a width if it is used as a layout or a complex container.

13.ie6 under the absolute positioning of the div contains a relative positioning of the div, if the inner layer relative positioning of the div height height concrete value, the inner layer relative layer will have a width value of 100%, the outer layer will be large. The solution gives the inner layer a float property relative to the layer.

14.width:100% this thing in IE is very convenient, will search the width of the layer upward, ignoring the impact of the floating layer, FF search to the end of the floating layer, so, can only give the middle of all the floating layer plus width:100% just line, tired ah. Opera has learned a good lesson with IE.

IE's float bug (IE6,IE7) has caused the front-end engineers to be bothered by the most common phenomenon: when the parent element of a floating element appears to be missing a border while dragging the scrollbar, the solution to such a problem is to have the floating element out.

In many cases, because the page needs to be free to stretch the width of a fixed value, but we can set *height:1%;,* here is very important, because * can only be IE7 and the following version of the resolution, IE8 does not recognize this type of writing, So you can use this notation to differentiate between IE8 and other versions of the IE browser. The hack of popular IE8 beta1 on the internet is also a supplement.

Some common hack tests

* HTML p {color:red;} Support IE6 does not support FF IE7 ie8b
*+html p {color:red;} Support for IE7 ie8b does not support FF IE6
p {*color:red;} Support for IE7 IE6 does not support FF ie8b

IE8 adds a substring matching property selector (substring matching attribute selectors) in CSS3, which is similar to the match in regular rules:

E[att^= ' Val ']//substring start with ' Val '
E[att$= ' Val ']//substring ends with ' Val '
E[att*= ' Val ']//substring contains ' Val '

IE8 supports most basic CSS2.1 selectors, not supported including but not limited to: [: First-line], [: First-letter].
For the generated Content section in CSS2.1, that is, the support in IE8 is not complete by using pseudo-elements: before and: After adding text content.
For opacity and RGBA, which are supported in almost all other browsers, there is still no support in IE8.
For the original used to differentiate IE HACK in the IE8 basic failure (such as *property:value, *property:value, etc.).
The original IE List-item whitespace bug still exists in IE8.
The original IE Z-index bug still exists in IE8.
New bug in IE8: When Line-heigth is less than normal, the excess will be trimmed off.
Display:table is still not supported in IE8.
The transparent value of border is still not supported in IE8.
@import in IE8 only supports three-tier nesting.
Border's transparent in IE8 is not supported
Create new Bug:line-heigth BUG in IE8
/*/p{color: #1e90ff}/*/only for IE8 hack, which can be attributes or classes

Bug Description:

A div in the page uses position:relative, with elements such as top=-25px to locate. It behaves normally under FF and IE7, but in IE6 the div scrolls with the mouse scrolling.

Analysis:

This is IE6 a known bug: When a position:relative element is contained by a block-level element with a Overflow:auto/scroll attribute, it shows the behavior of Postion:absolute.

Workaround:

1. Add the attribute position:relative for the containing block element.

2. Remove the position:relative attribute of the element, use the default static location, and achieve a similar effect through attributes such as Margin-top.

The end of the IE6 is coming, for our front-end developers, is undoubtedly a comforting good news. But this end is not Asahi, so we still strive for the final victory, with various hack and methods to circumvent the IE6 under the bilateral distance, background transparent, Repeat the text and so on a bunch of bugs. The following is a reprint from the Front End observation (translated from http://www.sitepoint.com/) in the 10 repair IE6 bug tips:
1. Using DOCTYPE
You should always use DOCTYPE on the head of every HTML file, and we recommend using the strict version, such as:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

Or, for XHTML use:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

The toughest thing you need to deal with is IE6 into quirks mode-it's weird enough.
2. Set Position:relative
Setting an element to "position:relative" can solve a lot of problems, especially if you've ever encountered a hidden or aligned box. Obviously, you need to be very careful because the child nodes that are absolutely positioned may be repositioned accordingly.
3. Set the floating element to Display:inline
Floating elements with the margin attribute may cause the famous IE6 double margin problem, for example, you specify Margin-left as 5px for an element, but IE6 actually behaves as 10px. "Display:inline" will solve this problem, although this is not necessary, your CSS is still valid.
4. Set an element to Haslayout
Many IE6 (and IE7) rendering problems can be solved by setting the haslayout of the element. This is an internal ie property (ie hidden, more information about Haslayout, which can be found here), to determine how the content is laid out and positioned relative to other elements. Setting haslayout may also be necessary if you need to set an inline element (such as a link) as a block element, or apply a transparency effect.
The simplest way to set Haslayout is to set a height or width for the CSS (zoom is also available, but Zoom is not part of the CSS standard). We recommend setting the actual size, but the problem is that this is unrealistic and you may need to use "height:1%". If the parent element does not have a height set, the actual height of the element is not affected, and Haslayout is enabled at this time.
5. Fixed duplicate text bug
A complex layout can trigger a bug where the last characters in a floating element may appear under the purge element. There are several solutions, some of which are perfect, but it is also necessary to do some repetitive tests:
ensure that all elements use "display:inline;"
. On the last element, use a "margin-right:-3px;"
. Use a conditional comment for the last entry of the floating element, such as:

<!--[if! Ie]>put your commentary in here...<! [endif]-->

The last element in the container uses an empty div (it is also necessary to set the width to 90% or similar width.
>>>>>> you can also visit positioniseverything.net to see a complete description of the issue.

6. Use only <a> tags on clickable and hover elements
IE6 only knows the CSS hover effect on the a tag.
You can also use them within JavaScript-based components to control them to keep the keyboard operable. There are some alternative options, but the <a> tag is more reliable than other alternatives.
7. Use!important or Advanced selector to differentiate IE6
It is also possible to write workable code specifically for IE6 without using traditional hack or conditional CSS in additional files. For example, the minimum height can be defined by this code:

#element {
Min-height:20em;
Height:auto!important; /* All browsers understand this code */
Height:20em; /* IE6 Incorrect use of this value/*
}

IE6 does not understand min-height and incorrectly overwrites the "auto" height with 20em, but it automatically increases the height if the content requires more space.
Another alternative is to use an advanced selector, such as e.g.

#element {
Min-height:20em;
Height:20em;
}
/* IE6 Ignore the following code * *
#element [id] {
Height:auto;
}

8. Avoid percentage units
The percentage will confuse ie. The best prevention is possible unless you can control the size of each parent element exactly. You can continue to use percentages in other browsers through!important, such as:

Body {
margin:2% 0!important;
margin:20px 0; /* IE6 only */
}9. Test early and keep testing
Don't wait until your website or app is finished to test IE6, so the problem may be worse and will take more time to fix. If your site works correctly in Firefox and IE6, there will be no problem with other browsers.
10. Refactor Your code
What happens most often is that it takes longer to fix a bug than to reconsider a layout problem. Making small changes to HTML and some simple CSS is often more effective. This may mean that you want to give up the perfect code, but there will be fewer long-term problems and in the future you will be well aware of the problems that may arise if you deal with them.

Let IE6 support images in PNG format

usage:

First copy the following code in Notepad, then save as PNGBEHAVIOR.HTC (name can be any):

<public:component lightweight= "true" >
<public:attach event= "Onpropertychange" onevent= "propertychanged ()"/>
<public:attach event= "Onbeforeprint" onevent= "BeforePrint ()" for= "window"/>
<public:attach event= "Onafterprint" onevent= "Afterprint ()" for= "window"/>
<script>

/*
* PNG Behavior
*
* This script is created by Erik Arvidsson (Http://webfx.eae.net/contact.html#erik)
* for WEBFX (http://webfx.eae.net)
* Copyright 2002-2004
*
* For usage See license at http://webfx.eae.net/license.html
*
* version:1.02
* created:2001-??    -?? First working version
* Updated:2002-03-28 Fixed issue when starting with a non PNG image and
* Switching between non PNG images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
* 2004-05-09 when printing revert to original
*
*/

var supported =/msie ((5\.5) |[ 6789])/.test (navigator.useragent) &&
Navigator.platform = = "Win32";

var realsrc;
var blanksrc = "Blank.gif";
var isprinting = false;

if (supported) Fiximage ();

function propertychanged () {
if (!supported | | isprinting) return;

var pName = Event.propertyname;
if (pName! = "src") return;
If not set to blank
if (!new RegExp (BLANKSRC). Test (SRC))
Fiximage ();
};

function Fiximage () {
Get SRC
var src = element.src;

Check for real change
if (src = = realsrc &&/\.png$/i.test (src)) {
ELEMENT.SRC = BLANKSRC;
Return
}

if (! New RegExp (BLANKSRC). Test (SRC)) {
Backup Old SRC
REALSRC = src;
}

Test for PNG
if (/\.png$/i.test (REALSRC)) {
Set blank image
ELEMENT.SRC = BLANKSRC;
Set Filter
Element.runtimeStyle.filter = "Progid:DXImageTransform.Microsoft." +
"AlphaImageLoader (src= '" + src + "', sizingmethod= ' scale ')";
}
else {
Remove Filter
Element.runtimeStyle.filter = "";
}
}

function BeforePrint () {
Isprinting = true;
ELEMENT.SRC = REALSRC;
Element.runtimeStyle.filter = "";
REALSRC = null;
}

function Afterprint () {
Isprinting = false;
Fiximage ();
}

</script>
</public:component>


Finally add this piece of code to your CSS file:

IMG {
Behavior:url ("PNGBEHAVIOR.HTC");
}

This is good!! All your PNG images will be supported under the annoying IE6!!

About IE6, IE7 compatibility Summary (RPM)