IE6 bug (1)

660 people read comments (0) collect reports

1. IE6's [crazy one] IE6's odd-high BUG

IE6 is crazy. Today, the project requires such a layout: an external relatively positioned div, an absolutely positioned inside div (right: 0 ),

However, in IE6, it turns into the right: 1px effect:

 

 

IE6 also has an odd-width bug,The solution is to change the externally positioned div width to an even number. The same is true for height.
View Source Code:

CSS code:

# Out {
Width: 609px;/* The width here is an odd number, and the bug is displayed !! Change to an even number */
Height: 300px;
Position: relative;
Background: # FF0000;
Color: # FFF;
}
# Inn {
Width: 200px;
Height: 250px;
Position: absolute;
Top: 0px;
Right: 0px;
Background: #000000;
}

XML/HTML code:

<Div id = "out">
<Div id = "inn"> This is an absolute internally positioned DIV </div>
</Div>

2. [IE6's crazy 2] PNG Alpha transparency in IE6 (Full Set)

, Fireofx, opera, and chrome, safari to the webkit kernel ..... These browsers support Alpha transparency of png.

Many people say that IE6 does not support PNG transparency. In fact, IE supports 100% transparent PNG. The crazy IE6 only does not support png Alpha transparency.

This BUG has brought us a lot of trouble.

However, there are still many problems, such as translucent PNG background images.

Gulu77 has compiled four PNG Alpha transparency methods in IE6:

Test instance: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html

IE6 is used for testing. The inserted images and background images are not transparent.

Method 1: AlphaImageLoader Filter

 

Microsoft offers a solution: http://support.microsoft.com/kb/294714/zh-cn

Introduction: Insert filter: progid: dximagetransform.microsoft.alphaimageloader(src1_'image.png ', sizingMethod = 'Scale') to each label style ')

Note:

AlphaImageLoader is difficult to insert images transparently

The AlphaImageLoader method is used on the background image to implement the background-image effect.

AlphaImageLoader IE8 is not supported

IE7 supports AlphaImageLoader. We recommend that you use CSS hack to avoid conflicts.

Test instance: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html

Method 2: PNG Transparency in IE

 

Usage: relatively simple. You can use a piece of JavaScript containing a filter to simulate the PNG alpha transparency of an image or background.

Note:
The spacer.gif transparent image in the root directory is replaced by a PNG image. The path of spacer.gif written in javascriptis adjusted as needed.
The PNGTransparncyinIE method can only achieve the background-image effect in the background application, and the call of duplicate background coordinates cannot be implemented for the time being.

Http://codingforums.com/archive/index.php? T-80555.html

Test instance: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html

 

Method 3: ie png Fix v1.0/0 Alpha 3

 

This is the latest version. Today we will focus on a method.

Usage: The page label uses behavior: url ("iepngfix. htc"); To call the iepngfix. htc file containing js and css externally to modify the PNG alpha transparency.

Test instance 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
Test instance 2 (official, e): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

• Supports elements.
• Supported background PNG images (unlike many other scripts! )
• Supports CSS 1 Background repetition and location (optional plug-ins)
• Background images can be defined as either built-in or external style sheets.
• The automatic processing is changed to steel concrete/background through normal JavaScript (for example, hovering over the car)-No special encoding is required.
• Changes support the 'category' change factors including CSS.
• Use an automatic <a href = ""> element of the Papua New Guinea background factor.
• Small script (quick download ).
• The next licensed free software license.How to UseFollow these simple steps to add this to your page: Follow these simple steps to add this to your webpage:
  1. Copy and pasteiepngfix.htcAndblank.gifTo your website folder.
  2. Copy and paste the CSS or HTML on your website:
     

     <style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

     This CSS selector must contain tags/content to be supported by Papua New Guinea-basically, give it a comma-separated list of tags for use. It must also contain the correct path. Macro phaseLocation of the h tml file (Non-relative CSS file! ). For example, you may look like this:

     <style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>

  3. If your website uses subfolders, open. The Macro file is in a text editor such as Windows notepad and changedblankImgThe package is like this:
     

     IEPNGFix.blankImg = '/images/blank.gif';

     The same path is a relative HTML file. Otherwise, you will see a broken image!

  4. If you want to support CSS 1 Background duplication and background location, be sure to include additional information. Js file in your:
     

     <script type="text/javascript" src="iepngfix_tilebg.js"></script>

     Otherwise, the background image can work, but it does not repeat or stand.

  5. You can sit down and enjoy it comfortably! Maybe consider donating to support the development of this script if you like what you see, because I spent hundreds of hours developing, testing and supporting it :). In addition, I would like to thank you for connecting your website to the mine!
     Official: http://www.twinhelix.com/css/iepngfix/

  If you are interested in learning more or another method to activate the script to maintain the validation CSS compatibility, see the source code demo file.

------------------------

How to solve common problems

1. I have already pasted it in CSS, but my pngs is not transparent!

Remember that path files are relative to HTML files, rather than CSS files (such as CSS background images ). If you want to test the path, insert:alert('This works!');Enter. Macro files.

2. Its project is offline rather than online.

The first attempt to decompress the preset demo and upload it to the Web server as is. If it does not work, you may have a MIME type problem. Make sure that your server sends the correct MIME type "text/X components. Macro files. Try one of the two easy fixes:

3. uploaded. "Htaccess" file. Download and compress the script to the Web server. This will make Apache send out the correct MIME type.

4. Instead of the so-called "IEPNGFIX. HTC" from your CSS, upload IEPNGFIX. PHP to the same folder and call for no, which also generates the correct MIME type.

5. My pngs is transparent, but there is an interesting boundary or a red "X" icon.

CheckblankImgThe variable is set correctly. Macro file, corresponding HTML file again, carrying PNGs.

Image distortion, or this script breaks my webpage layout.

When applied to images with no settings aspect, the script will try and "Guess" the correct image size and applicable. If it gets something wrong, give you a clear imagewidth.

A png 'd element cannot be clicked as a link or form element.

Test instance 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
Test instance 2 (official, e): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

Method 4: ie png Fix v1.0/0 Alpha 3

 

Introduction: ie7/ie8-js is a JS library that resolves conflicts between IE and W3C standards, making Microsoft's IE behavior like a Web standard compatible browser that supports more W3C standards.
Official: http://code.google.com/p/ie7-js/

Test instance: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html

3. Example of IE6 3 pixel BUG

Problem: two columns of layout. Left column fixed, right column liquid
I need to make a layout.
2 columns with fixed width on the left column. The right column uses the remaining width. The overall width is not fixed, so that the width of the left column remains unchanged regardless of whether the screen is 17 or 19, and the width of the right column always occupies the remaining width.
However, I cannot solve the Three-pixel bug in ie6.
Test in IE6

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "<a href =" blank target = "_ blank" rel = "external"> http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd </ a> ">
<! -Saved from url = (0027) <a href = "http://www.chen-jing.cn/12/" target =" _ blank "rel =" external "> http://www.chen-jing.cn/12/ </a>->
<HTML xmlns = "<a href =" http://www.w3.org/5o/xhtml" target = "_ blank" rel = "external"> http://www.w3.org/1999/xhtml </a> "> <HEAD> <TITLE> 3 pixel bug </TITLE>
<META http-equiv = Content-Type content = "text/html; charset = gb2312">
<STYLE type = text/css> BODY {
FONT-SIZE: 12px
}
. A1 {
BACKGROUND: #333; FLOAT: left; WIDTH: 100px; COLOR: # ffffff; HEIGHT: 240px
}
. A2 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 100px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
. A2 # jing {
BACKGROUND: #00 ccff; MARGIN-LEFT:-3px; HEIGHT: 100px
}
. A2 # jing2 {
BACKGROUND: # ff9900; HEIGHT: 100px
}
</STYLE>

<META content = "MSHTML 6.00.6000.16587" name = GENERATOR> </HEAD>
<BODY>
<DIV class = "a1"> I am class = a1 <BR> <A style = "COLOR: # ffff00 ″
Onclick = "this. parentNode. style. height = '100px '"
Href = "<a href =" http://www.chen-jing.cn/12/" target = "_ blank" rel = "external"> http://www.chen-jing.cn/12/ </a> # "> click to set a1 height to 100 </A> <BR> <
Style = "COLOR: # ffff00" onClick = "this. parentNode. style. height = '150px '"
Href = "<a href =" http://www.chen-jing.cn/12/" target = "_ blank" rel = "external"> http://www.chen-jing.cn/12/ </a> # "> click to set a1 height to 150 </A> </DIV>
<DIV class = "a2">
<DIV
Id = jing> I am id = jing <BR> this problem exists in ie6. Ie7, opera, and ff are all correct. Observe the border set by the div of class = a2 and you will find that there is no distance between a2 and a1. But a2
The elements (text) in the content will generate an effect similar to padding-left: 3px; between them and a2. The distance between the first element id = jing and a2 cannot be eliminated by setting negative values. More interestingly, when I set _ margin-left:-3px; the original id = jing and a2
The 3-pixel distance between them is changed to 2 pixels. However, the negative value of _ margin-left in time cannot be completely eliminated. </DIV>
<DIV id = jing2> I am id = jing2 <BR> when the height of a1 is greater than the height of id = jing, di = jing2
It will also generate a distance similar to padding-left: 3px between a2. When a1 is less than or equal to id = jing, id = jing2
There will be no spacing between them and a2. <BR> originally, I just wanted to fix the left column, and the right column automatically adapted to the layout of the remaining width. But I did not expect to find this problem. Please tell me how to solve this problem.
</DIV> </BODY> </HTML>