现在的位置: 首页 > 综合 > 正文

IE6 Bug及解决方案汇总

2012年06月12日 ⁄ 综合 ⁄ 共 3633字 ⁄ 字号 评论关闭

   

   作为一名Web前端工作人员,经常会遇到很多浏览器不兼容的问题,尤其打交道最多的便是IE6.

   由于很多原因,我们也没办法完全屏蔽它。所以在此总结一些IE6 Bug和解决方案,供自己和广大前端工作人员参考。

   参考:http://www.css88.com/archives/579

 

   1.双外边距浮动Bug(margin+float)

  

                                          图  1                                   

   

   我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。

   这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,

    

   我们给绿色盒模型应用以下CSS属性:

.floatbox{
float
: left;
width
: 150px;
height
: 150px;
margin
: 5px 0 5px 100px;
/*外边距的最后一个值保 证了100像素的距离*/
}

 

                                       图 2

  解决方案:

 

.floatbox {
float
: left;
width
: 150px;
height
: 150px;
margin
: 5px 0 5px 100px;
display
: inline;
}

  结果:

                                     图  3

 

2.png格式Alpha透明问题

问题分析:ie7及其以上的浏览器,fireofx,opera及至webkit内核的chrome ,safari, 这些浏览器均支持png的Alpha透明

        ie6与生俱来就支持png8的索引色透明度,但不支持png8位以上的alpha 透明度。

               测试页面:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html

               (ps.而对于非动画的GIF建议你使用PNG8,因为体积会更小)

 

问题分为2种情况:

  第一种是以img方式插入html中的图片

   IE PNG Fix v1.0 / 2.0 Alpha 3(利用JS)

  

  这是目前最新版本,今天重点介绍的一个方法。

  使用简介:页面标签使用behavior:url("iepngfix.htc");来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度.

  测试实例1:http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
  测试实例2(官方,e文):http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

  • 支持<img src=”">元素。
  • 支持的背景PNG图像(不像许多其他的脚本)
  • 支持CSS1背景重复和位置(通过可选插件)
  • 背景图像可以被界定内置或在外部的样式表。
  • 自动处理改为钢骨混凝土/背景通过正常的JavaScript (例如鼠标悬停翻车) -没有特殊的编码需要。
  • 改变支持包括CSS的’类别’的变化因素。
  • 采用自动变通的<a href=”">要素巴布亚新几内亚背景因素。
  • 微小的脚本(快速下载) 。
  • 领有牌照的下一个自由软件许可证。

    如何使用 Follow these simple steps to add this to your page:遵循这些简单的步骤,将此添加到您的网页:

    1. 复制并粘贴iepngfix.htcblank.gif到您的网站文件夹中。
    2. 复制并粘贴到您的网站的CSS或HTML :

 

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

 

     它还必须包括正确的路径。相对H TML文件的位置(不相对的CSS文件!) 。

     例如,你可能看起来像这样:

 

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

 

 

     如果您的网站使用的子文件夹,打开。编辑文件在文本编辑器如Windows记事本,并改变blankImg参数,包括正确道路blank.gif像这样:

 

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

 

   同样的路径是相对的HTML文件。否则,你将看到一个“破碎的形象”的图形!
  如果你想支持CSS1背景重复和背景位置,请务必包括附加。 js文件在您<head> :

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

 

  第二种是背景方式的图片background-image:url();  

  提出以下解决方案;

     filter:AlphaImageLoader

  

  使用简介:在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)

  注意事项:

  AlphaImageLoader方法用于背景图片上,实现background-image的效果

  AlphaImageLoader IE8不支持

  因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用

  测试实例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html

  

更多方案见:http://www.css88.com/archives/577

  

 

  三.IE 3像素BUG

      问题2列布局,左边列固定宽度,右边列使用剩余宽度。

            左边200px,高度200px,红色背景;右边宽度自适应,高度200px,绿色背景

            ie浏览器相对于左边部分位移3像素

            (一开始我以为只有ie6才有问题,结果测试IE6,7,8都有问题)

     代码如下:

代码

<html>
<head>
<title>两栏左边固定右边自适应</title>
<style type="text/css">
*
{margin:0;padding:0}
  body{
width
:100%;
height
:auto;
font-size
:12px;
}
  #left{
width
:200px;
height
:200px;
background
:#f00;
float
:left;
}
#right
{
height
:200px;
background
:#0f0;
}
</style>
</head>
<body>
<div id="left">左边</div>
<div id="right">右边</div>
</body>
</html>


 

把#left修改一下,让IE浏览器margin-right:-3px;

 

#left{
width
:200px;
height
:200px;
margin-right
:-3px\9;
*margin-right
:-3px;
background
:#f00;
float
:left;
}

 

这样就解决了3px间距问题,但是出现了新的问题,

就是这种方法仅仅满足左右定义高度一致的情况,当右边高于左边时,不同浏览器解析不同,

如IE6-8,则左右分列,但对于FF,Chrome等浏览器右边文档流环绕浮动层。

于是修改代码如下:

 

 

代码

<html>
<head>
<title>两栏左边固定右边自适应</title>
<style type="text/css">
*
{margin:0;padding:0}
body
{
width
:100%;
height
:auto;
font-size
:12px;
}
#content
{
min-height
:700px;
height
:700px\9;
*height
:700px;
}
#left
{
width
:200px;
height
:100%;
margin-right
:-3px\9;
*margin-right
:-3px;
background
:#f00;
float
:left;
}
#right
{
height
:100%;
background
:#0f0;
}
</style>
</head>
<body>
<div id="content">
<div id="left">左边</div>
<div id="right">右边</div>
</div>
</body>
</html>

 

 

 

抱歉!评论已关闭.