`
ava_chc2000
  • 浏览: 76903 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

IE6 最常10种修复bug方法

阅读更多

1. 强制浏览器是用Web标准解析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">




2. Set Position: relative

给元素指定Position: relative能够解决很多奇怪的问题,比如对齐和显示不正确等。对于Position的属性要小心设置,特别是设为absolute。


3. 给Float的元素加上inline属性避免双倍margin

这大概是最著名的一个bug了,IE6下对于浮动元素,会莫名其妙的双倍空白边,解决的方法也很莫名,设上display:inline属性就好了,对于float元素这个属性本身没有任何意义。


4. 给特定元素加上hasLayout属性

很多IE6(甚至是IE7)的问题可以通过设置hasLayout这个ie only的内部属性来解决,比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有 hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候,你不能显示的为其设定高度,可以使用设置高度为1%,而其父元素如果没有确定的高度时,该设置不会被应用到实际的高度上,但是hasLayout会被激活。




5. Fix字符重复bug

这是IE6上面一个非常奇怪的BUG,他的触发条件也是相当诡异,在浮动元素间如果有
<!– comment –> <!– comment –> <!– comment –>
这样的普通的HTML注释的话,会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中,具体的介绍大家可以看这里 positioniseverything 。

解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 <!–[if !IE]>Put your commentary in here…<![endif]–>
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)



6. 需要悬浮效果的地方,尽量使用<a>标签

IE6中只能对<a>应用css hover效果,所以尽可能使用<a>标签来获取最大的兼容性。


7. 使用!important或者高级选择器来兼容IE6

使用!important和高级选择器来兼容IE6,可以避免使用那些通不过校验的非常规hack,比如所谓的_width这样的东西。我们来看个简单的例子。

 
#element {
    min-height: 20em;
    height: auto !important; /* understood by all browsers */
    height: 20em; /* IE6 incorrectly uses this value /*
}



IE6是不能正确解读!important这个修饰符的,所以他会错误的使用height:20em这个属性来实现最小高度。(IE6下容器会自动扩展)

 
#element {
   min-height: 20em;
   height: 20em;
}
  
/* ignored by IE6 */
#element[id] {
  height: auto;
}




或者使用高级选择器,同样也能实现该目的,这样代码既能保持合法性,也能很好的去兼容IE6这个诡异的产品。

针对各版本IE和FF的css hack

 
#element{
/*顺序是FF&IE8,IE7,IE6 不能颠倒!*/
color:red /* 只对FF*/
color:/*\**/black\9 /*只对IE8有效**/
*color:gray/*只对IE7有效*/
_color:blue /*只对IE6有效*/
}



8. 避免在IE6下使用百分比尺寸

 
body {
    margin: 2% 0 !important;
    margin: 20px 0; /* IE6 only */
}




IE6下是用百分比的尺寸是件非常让人头疼的事情,尽可能避免这样的使用,而是采用结合!important和精确尺寸来明确元素的大小。


9. 频繁测试,尽早测试

和其他编程一样,现在编程提倡持续测试,尽早测试,甚至可以测试驱动,在CSS开发过程中也要尽可能的频繁测试,可以参看我之前介绍的一些测试工具。

IE: IE developer toolbar, debug bar ,IETester(ie5-8)
FF: firebug

10. 重构你的代码

 

 

 

 

 

 

在任何浏览器中,需要获得鼠标hover效果,都建议尽量采用A标签,可以先将A标签强制转化为block块级元素(display:block),然后就可以为其设定宽度和高度,但是它也具有了块级元素自动换行的属性,所以麻烦的是如果要其横排还要为其指定float:left,并且在应用完成后及时的清除浮动,这样就可以得到<div onclick="">或者<li onclick="">效果,而且获得了最大兼容性。在任何浏览器中,需要获得鼠标hover效果,都建议尽量采用A标签,可以先将A标签强制转化为block块级元素(display:block),然后就可以为其设定宽度和高度,但是它也具有了块级元素自动换行的属性,所以麻烦的是如果要其横排还要为其指定float:left,并且在应用完成后及时的清除浮动,这样就可以得到<div onclick="">或者<li onclick="">效果,而且获得了最大兼容性。

分享到:
评论

相关推荐

    ie6BUG解决方案

    然而,在IE6中,这两个方法都存在问题。 1. `opacity`属性:IE6并不支持CSS3的`opacity`属性。为了实现透明效果,开发者通常会依赖JavaScript库,如jQuery,或者使用专为IE6设计的滤镜(filter)属性。例如,可以...

    Bootstrap-datetimepicker先天bug修复,兼容IE6+

    然而,如同许多前端组件一样,它可能存在一些与特定浏览器兼容性相关的先天bug,特别是对于老版本的Internet Explorer(如IE6、IE7等)。在这些老版本的IE浏览器中,由于其对CSS3、JavaScript和DOM的支持有限,可能...

    uploadify.js修复IE9 IE10浏览按钮点击无效的bug

    3. **处理DOM操作**:IE9和IE10可能对DOM操作有特殊的要求,如创建、删除或修改元素时,需要使用特定的IE兼容模式方法。 4. **修复ActiveX支持**:IE9和IE10对于ActiveX控件的支持有限,如果Uploadify依赖ActiveX来...

    9个最常见IE的Bug及其fix

    这两种方法都可以让IE6正确地处理列表项的布局,避免出现楼梯式效果。 ### 3. Float元素的双倍空白 在使用浮动元素时,IE6可能会在元素之间产生额外的空白,导致布局不整洁。这种现象尤其在并排的浮动元素间更为...

    jquery.uploadify.js修复IE9 IE10浏览按钮点击无效的bug

    在本案例中,"jquery.uploadify.js修复IE9 IE10浏览按钮点击无效的bug",这个问题通常是由于Uploadify与IE9、IE10的交互机制不兼容导致的。在这些版本的IE中,点击浏览按钮可能无法打开文件选择对话框,使得用户无法...

    最常见的9种IE_css_bug及fix

    ### 最常见的9种IE_css_bug及fix:深入解析与解决方案 #### 1. 居中布局问题 在Web开发中,将元素居中是极为常见的需求。通过设置`margin: auto;`通常能够轻松实现这一目标,但在IE6中,这种方法却会遇到问题。...

    IE6浏览器完美兼容PNG图片的BUG(包括背景)

    解决IE6的PNG BUG有多种方法,其中一种是使用JavaScript库,比如压缩包中的"ie6-png.js"。这个脚本的目的是动态地将PNG-24图像转换为PNG-8,或者应用滤镜来实现透明效果。具体实现原理是利用IE6特有的滤镜属性,如...

    解决ie9、ie10本地css加载不上的解决方法实例

    解决IE9和IE10本地CSS加载不上的问题,我们可以尝试以下几种方法: 1. **禁用缓存**:在开发过程中,浏览器缓存可能会导致CSS文件未被重新加载。可以在URL后面添加一个时间戳或者随机字符串,强制浏览器认为这是一...

    iebug总结jar包

    "iebug总结jar包"是一个专门针对这些问题的资源集合,它包含了处理IE bug的相关资料,特别是针对IE6的解决方案。以下是基于这个主题的详细知识点: 1. **IE6的渲染引擎**:IE6使用的是Trident渲染引擎,它与现代...

    自适应轮播图 修复ie9bug

    修复前一个“自适应轮播图 ” ie9以下的bug 兼容IE6+ ie6下面要做一些CSShack 可以参考文章http://blog.csdn.net/qianqianyixiao1/article/details/42584361

    IE6 PNG图片 BUG

    总之,"IE6 PNG图片 BUG"是前端开发历史上的一个痛点,虽然现在IE6的使用率已经极低,但在支持更广泛的浏览器兼容性时,理解这个问题仍然很重要。随着技术的进步,如今的浏览器已经更好地支持PNG和其他高级特性,但...

    jQuery ajaxFileUpload.js 插件 ie9 下bug 修复

    总的来说,`jQuery ajaxFileUpload.js 插件 ie9 下bug 修复`这个主题涵盖了前端开发中的重要知识点,包括浏览器兼容性、异步文件上传、Ajax交互和事件处理等。理解和解决这些问题对于提升老旧浏览器下的用户体验至关...

    IE8 序号不动bug完美修复新增鼠标放置控件停止效果

    本文将深入探讨“IE8序号不动bug”的完美修复方法,以及如何新增鼠标放置时停止图片动画的效果。这两个知识点对于提升用户体验和优化网页性能至关重要。 首先,让我们来解决“IE8序号不动bug”。这个bug通常出现在...

    thickbox IE7 BUG修复

    ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件。它可以用来展示单一图片、若干...可在IE7或IE8下,弹出的窗口总是居中偏下的,甚至连示例网站也是类似错误。而为了解决这一问题,提供的相应补丁。

    IE 常见bug 及其fix

    本篇将详细介绍9个最常见的IE bug及其修复方法。 1. 居中布局问题 在CSS布局中,将元素居中对齐是很常见的需求。一般通过`margin: auto;`实现,但在IE6中会出现问题。解决方法是在父元素中添加`text-align: center;...

    MATLAB R2013a IE11帮助格式修复补丁

    MATLAB R2013a IE11帮助格式修复补丁是针对MATLAB R2013a版本中出现的一个特定问题而设计的更新。在MATLAB R2013a版本中,用户可能遇到使用Internet Explorer 11(IE11)浏览器查看MATLAB帮助文档时,显示格式出现...

    css常见的bug(ie)

    在网页设计中,CSS(Cascading Style Sheets)起着至关重要的作用,它负责定义页面的布局和样式...随着浏览器更新和技术进步,许多旧的bug已经得到修复,但了解这些问题的历史和解决方案仍然对Web开发者来说是宝贵的。

    JEECMS的新浪图集在IE9、10不能显示大图片BUG的解决方法

    **标题:“JEECMS的新浪图集在IE9、10不能显示大图片BUG的解决方法”** 在本文中,我们将深入探讨一个针对JEECMS(Java Enterprise Edition Content Management System)系统的常见问题,即新浪图集在Internet ...

    莫名其妙的IE 3像素Bug

    标题中的“莫名其妙的IE 3像素Bug”指的是在Internet Explorer(IE)浏览器中出现的一种特定的布局问题。这种问题通常发生在网页元素的边缘,尤其是在不同浏览器间存在渲染差异时。IE浏览器由于其独特的渲染引擎,...

    网页排版IE6兼容性问题修改方法

    当元素设置为`display:inline-block`时,IE6会出现双边距bug,可以通过设置`display:block`或`zoom:1;`(触发hasLayout)来消除。 5. **hasLayout机制** IE6特有的hasLayout机制,当元素满足某些条件时,会自动...

Global site tag (gtag.js) - Google Analytics