设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

IE6Bug(WEB前端开发 http://www.css88.com/)

2012-04-16 22:56:00.0 浏览器 ie 前端开发 web css iframe div  
导读:css的优先级及!important在IE6下的一个BUG[2009年8月1日更新] 一 css的优先级今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样...。。。
css的优先级及!important在IE6下的一个BUG[2009年8月1日更新] 
一 css的优先级
今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢?到底ie6支不支持!important呢?
首先我们来看看!important这个属性的作用:!important是用来提升样式优先级的,我们知道样式是有优先级的。
我们先看看css的优先级的几个基本的规则:http://www.css88.com/archives/tag/ie6-bug
ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*{}),也就是ID选择器,类选择器,标签选择器中,ID选择器的优先级最高,标签选择器最低;(转载请注明出处:WEB前端开发 http://www.css88.com/)
选择器越具体优先级就越高,也就是
.classA .classB .classC{font-size: 25px;}
.classB .classC{font-size:18px}
.classC { font-size: 12px; }
这里.classA .classB .classC的优先级最高,.classC的优先级最低;
在同一个级别的情况下,最后指定的规则优先级就越高,也就是我们通常说的就近原则;html中标签的style的属性都高于css文件中的选择器样式;
标有”!important”的规则有最高优先级。
【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG 
在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8及firefox、chrome等不一致。
在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。
目前解决办法,使用csshack,_left针对ie6进行重设。
另:IE6 BUG大全: http://www.css88.com/archives/579
【IE6的疯狂之九】li在IE中底部空行的BUG 
曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题),原文地址: http://www.css88.com/archives/421;
IE6 BUG大全: http://www.css88.com/archives/579
但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:
HTML代码:

【IE6的疯狂之一】IE6中奇数宽高的BUG 
IE6真是太疯狂了。今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0),
如图:
可是在IE6下查看,却变成了right:1px的效果了:
IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的
查看源码:
CSS代码:
#out {
width: 609px;/*这里宽度为奇数,bug就出现了!!改成偶数就OK了*/
height: 300px;
position: relative;
background:#FF0000;
color:#FFF;
}
#inn {
width: 200px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background:#000000;
}
XML/HTML代码:

此处为内部绝对定位的 DIV


【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG 
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存。
例如:
CSS代码
a:hover{background:url(imagepath)}  
常用的解决方案:
在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。
 
XML/HTML代码
  
  
document.execCommand(”BackgroundImageCache”, false, true);   
  
  
  
 
【IE6的疯狂之七】样式中文注释后引发失效 
这是ie6 出现的奇怪现象。这是由于css 和html 的编码不同所引致。
满足下面条件就会引起 注释下面的样式不起作用:
1. css有中文注释
2. css为ANSI编码
3. html为utf-8编码
解决方法:
1. 去掉中文注释,用英文注释
2. 统一css 和 html 的编码
建议采用第二种解决方法
ps: css为uft-8  html 为ANSI 不会出现失效的情况。
参考文章:冯子胡说 的 http://vontall.blogbus.com/logs/4366443.html
【IE6 BUG大全】position:fixed在IE6下的实现 
 
Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。
 

描述
static
默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative
位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。
absolute
位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。
fixed
位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。
 
position:static 无定位
该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
如:#nav{position:static;}
这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。
其他两种前面提过,我们 主要说的是fixed
position:fixed 相对于窗口的固定定位
请特别注意,IE6及以下不支持CSS中的position:fixed属性。真的非常遗憾,所以我们只能通过JS模拟和CSS Hack等方法来实现。
1.IE条件注释解决方案:
demo: http://www.css88.com/demo/position_fixed/POSITION_fixed2.html
【IE6的疯狂系列】IE6 BUG大全(bug征集、整理中..) 
IE6 bug到底令我们前端开发头痛我就不多说了
说实话,很多东西我一直在回避IE6的BUG,比如不用半透明的PNG。。。
但是毕竟IE6还将长期存在,而且IE6在中国比例目前还绝对多数,所以我们无法回避。逃无可逃,退无可退!
现整理收集《【IE6的疯狂系列】IE6 bug大全》仅供参考。
如果大家发现IE6或者IE7的BUG,并愿意共享,请您留言,来邮件:feiwen8772@qq.com,或者QQ:148246293,本人将尽快总结这里,和大家一起分享。
【IE6的疯狂之一】IE6中奇数宽高的BUG:http://www.css88.com/archives/1725
【IE6的疯狂之二】IE6中PNG Alpha透明:http://www.css88.com/archives/577
【IE6的疯狂之三】IE6 3像素BUG的实例:http://www.css88.com/archives/117
【IE6的疯狂之四】IE6文字溢出BUG:http://www.css88.com/archives/253
【IE6的疯狂之五】div遮盖select的解决方案:http://www.css88.com/archives/545
【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题):http://www.css88.com/archives/421
【IE6的疯狂之七】样式中文注释后引发失效:http://www.css88.com/archives/726
【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG:http://www.css88.com/archives/744
【IE6的疯狂之九】li在IE中底部空行的BUG:http://www.css88.com/archives/1111
【IE6的疯狂之十】父级使用padding后,子元素绝对定位的BUGhttp://www.css88.com/archives/1584
【IE6的疯狂之十一】!important在IE6下的一个BUG:http://www.css88.com/archives/1716
【IE6的疯狂之十二】一个display:none引起的3像素的BUG:http://www.css88.com/archives/1797
【IE6的疯狂之二】IE6中PNG Alpha透明(全集) 
ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。
很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG,疯狂的IE6只是不支持png的Alpha透明。
这个BUG给我们带来了很大的困扰。
但是这仍然存在很多问题,比如半透明的PNG背景图片。
Gulu77整理了4种IE6中PNG Alpha透明的方法:
测试实例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
这里用IE6测试,插入的图片和背景图片没有透明。
 
第一种方法:AlphaImageLoader 筛选器
微软给出了一个解决方案:http://support.microsoft.com/kb/294714/zh-cn
 
使用简介:在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/upload/20141122/1416616889457.png’, sizingMethod=’scale’)
注意事项:
AlphaImageLoader难以实现插入图片透明
AlphaImageLoader方法用于背景图片上,实现background-image的效果
AlphaImageLoader IE8不支持
因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用
测试实例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html
 
第二种方法:PNG Transparency in IE
使用简介:相对来说比较简洁,使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度
注意事项:

PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
官方原文:http://codingforums.com/archive/index.php?t-80555.html
测试实例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html
 
第三种方法:IE PNG Fix v1.0 / 2.0 Alpha 3
这是目前最新版本,今天重点介绍的一个方法。
使用简介:页面标签使用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
支持元素。
支持的背景PNG图像(不像许多其他的脚本! )
支持CSS1背景重复和位置(通过可选插件)
背景图像可以被界定内置或在外部的样式表。
自动处理改为钢骨混凝土/背景通过正常的JavaScript (例如鼠标悬停翻车) -没有特殊的编码需要。
改变支持包括CSS的’类别’的变化因素。
采用自动变通的要素巴布亚新几内亚背景因素。
微小的脚本(快速下载) 。
领有牌照的下一个自由软件许可证。
如何使用 Follow these simple steps to add this to your page:遵循这些简单的步骤,将此添加到您的网页:

复制并粘贴到您的网站的CSS或HTML : 

这的CSS选择器必须包含标签/内容要巴布亚新几内亚支持-基本上,给它一个逗号分隔的清单上的标签使用。它还必须包括正确的路径。宏达相对H TML文件的位置(不相对的CSS文件! ) 。 [...]
【IE6的疯狂之五】div遮盖select的解决方案 
IE6以及一下版本下,选择框Select会覆盖Div中的内容
一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容。由于Iframe的可以显示在Select上层,就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架即可,不用修改其他内容。
例如:http://www.css88.com/demo/div_select/div_select.html
CSS代码
body { margin: 0; padding: 0; text-align: center; background-color: #eee; }   
#bd { margin: 20px auto; padding: 5px 20px 20px; border: 1px solid #bbb; width: 760px; background-color:#9CCE2E;  }   
#popup {width: 300px;height: 100px;padding: 10px;position: absolute;left: 443px;top: 57px;border: 1px solid blue;background-color: #fff;filter:alpha(opacity=60);opacity:0.4;}   
#popup iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;/*must have*/top:0;/*must have*/left:0;/*must have*/z-index:-1;/*must have*/filter:mask();/*must have*/width: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}  
 
尤其注意这个样式:
#popup iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;/*must have*/top:0;/*must have*/left:0;/*must have*/z-index:-1;/*must have*/filter:mask();/*must have*/width: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}  
 
XML/HTML代码
  

IE6下div遮盖select的解决方案

  

  
  
  
  

  

  
Is the select element poking through?   
  
  

转载注明:http://www.css88.com/article.asp?id=503
注意::表示在IE6下显示,但是我们从样式中可以看出这个iframe是看不到的;
目前存在的bug:IE6下下拉框(select)看不到。

From - http://www.css88.com/archives/tag/ie6-bug

转自:http://minepace.blog.sohu.com/140241914.html

(编辑: bill200711022)

网友评论
相关文章