关于 IE6、 IE7兼容性总结(转)
其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决。
下面是14条特殊情况仅供参考:
1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。
2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。
3.横向上的撑破容器问题,。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。
小实验:有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。
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>
上面的代码在不同浏览器中是不一样的,实验起源于对小height 值div 的运用,<div style=”height:10px;overflow:hidden”></div>,小height 值要配合overflow:hidden一起使用。实验好玩而已,想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。
4.最被痛恨的,double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。
5.mirror margin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。
引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。
6. 吞吃现象。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
8.img 下的留白,大家看这段代码有啥问题:
<div>
<img src=”" mce_src=”" />
</div>
把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写
<div>
<img src=”" mce_src=”" /></div>
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。
9. 失去line-height。<div style=”line-height:20px”><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是<img />这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。
引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。
10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>
11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案:给overflow:hidden加position:relative或者position: absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。
12.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。
13.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。
14.width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。opera这点倒学乖了跟了ie。
ie的float bug(ie6,ie7)使前端工程师们为之困扰,最常见的现象就是:当浮动元素的父级元素在拖动滚动条的时候出现边框的缺失,对于此类问题的解决方案就是使浮动元素获得布局.
在诸多的情况中,因为页面需要宽度自由伸缩而不能申明宽度为固定值,但我们可以设置*height:1%;,*在这里可谓是举足轻 重,因为*只能被ie7及以下版本解析,ie8并不识别此类写法,所以可以使用这个写法来区别ie8和其他版本号的ie浏览器.对网上流行的ie8 beta1的hack,也算是一个补充.
一些常用的hack测试
* html p {color:red;} 支持 IE6 不支持FF IE7 IE8b
*+html p {color:red;} 支持 IE7 IE8b 不支持FF IE6
p {*color:red;} 支持 IE7 IE6 不支持FF IE8b
IE8 中增加了 CSS3 中的子串匹配的属性选择器(substring matching attribute selectors),具体规则与正则中的匹配很相似:
E[att^=’val’] //子串以’val’ 开始
E[att$=’val’] //子串以’val’ 结束
E[att*=’val’] //子串中包含’val’
IE8 支持绝大多数基本的 CSS2.1 选择器,不支持的包括但不限于:[:first-line] 、[:first-letter]。
对于 CSS2.1 中的 generated content 部分,即通过使用伪元素 :before 和 :after 添加文本内容,IE8 中支持 并未完全 。
而对于几乎在其他浏览器中都支持的 opacity 和 RGBA ,IE8 中依旧没有支持。
对于原来用来区分 IE 的 HACK 在 IE8 中基本失效(比如*property:value、*property:value等)。
原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。
原有 IE 的 z-index bug 在 IE8 中依旧存在。
IE8 中产生新的 bug:当 line-heigth 小于正常值时,超出的部分将被裁切掉。
IE8 中依然不支持 display:table 。
IE8 中依然不支持 border 的 transparent 值。
IE8 中 @import 只支持三层嵌套。
IE8中 border的 transparent 不被支持
IE8中产生新的BUG:line-heigth BUG
/*/p{ color:#1e90ff}/*/ 只针对IE8的hack,可以是属性也可以是类
BUG描述:
页面中某DIV使用了position:relative,结合top=-25px等元素定位。在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动。
分析:
这是IE6一个已知的BUG:当某position:relative元素 被带有overflow:auto/scroll属性的块级元素包含时,会表现出postion:absolute的行为。
解决方法:
1.为包含块元素添加属性position:relative 。
2.把该元素的position:relative属性去掉,使用默认的static定位,并通过margin-top等属性实现类似的效果。
ie6的末日即将来临,对我们前端开发人员来说,无疑是一个慰藉人心的喜讯.但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避ie6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察(译自http://www.sitepoint.com/)中的10个修复ie6下bug技巧:
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE,并且我们推荐使用strict 版本,比如:
或者,对于XHTML使用:
你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。
2. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题,特别是你曾经遇到隐藏的或对齐诡异的盒子。显然,你需要非常小心点儿,因为绝对定位的子节点可能会因此重新定位。
3. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,比如,你为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题,尽管这不是必须的,你的CSS仍然是有效的。
4. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果你需要设 置一个inline元素(比如一个链接)为block元素,或者是应用透明效果,设置hasLayout也可能是必须的。
最简单的设置hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。我们推荐设置实际尺 寸,但是问题是这是不现实的,你可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候 hasLayout已经被启用。
5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
.确保所有的元素使用”display:inline;”
.在最后一个元素上使用一个”margin-right:-3px;”
.为浮动元素的最后一个条目使用一个条件注释,比如:
.在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。
>>>>>>你还可以访问positioniseverything.net 查看该问题的完整介绍。
6. 在可点击和悬停的元素上只使用<a>标签
IE6只认识对a标签的CSS hover效果。
你也可以在基于JavaScript的组件内使用他们来控制,以使他们保持键盘的可操作性。是有一些可替代的选择,但是<a>标签比其它方案更可靠。
7. 使用!important 或高级选择器来区分IE6
不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:
min-height: 20em;
height: auto !important; /* 所有浏览器都理解这段代码 */
height: 20em; /* IE6 错误的使用这个值 /*
}
IE6 不理解min-height并错误的用20em覆盖”auto”高度,但是,如果内容需要更多的空间的话,它会自动增加高度。
另外一个可选的方法是使用高级选择器,比如e.g.
min-height: 20em;
height: 20em;
}
/* IE6 无视下面的代码*/
#element[id] {
height: auto;
}
8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小,才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比,比如:
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕,而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行,那么一般在其它浏览器就不会有问题。
10. 重构你的代码
经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码,但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。
让IE6支持PNG格式的图片
用法:
先复制下面的代码在记事本中,然后另存为pngbehavior.htc(名字可以任意):
<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 was 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>
最后在你的css文件里面加上这么一段代码:
img {
behavior: url("pngbehavior.htc");
}
这样就好了!!你所有的png图片在讨厌的ie6下都会被支持了!!
关于 IE6、 IE7兼容性总结(转)的更多相关文章
- ie6,ie7兼容性总结(转)
其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font ...
- ie6,ie7兼容性总结
摘自: http://www.cnblogs.com/li0803/archive/2009/08/22/1552094.html 其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致 ...
- [IE兼容性] Table 之边框 (IE6 IE7 IE8(Q) 中 cellspacing 属性在重合的边框模型的表格中仍然有效)
在 IE6 IE7 IE8(Q) 中,在通过 border-collapse:collapse 使用表格的重合边框模型后,其 cellspacing 属性仍然有效: 在 其他浏览器 中,此时的 cel ...
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- IE6+IE7+IE8+IE9+FF兼容性调试
HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同) 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF ...
- IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
- ie6 ie7 ie8 ie9兼容问题终极解决方案
放下包袱,解决低版本兼容问题 这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法: 1.强制使用高版本渲染模式. 强制使用Edge模式来解析网页代码 <meta ...
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...
随机推荐
- C#操作access和SQL server数据库代码实例
在C#的学习中,操作数据库是比较常用的技术,而access和sql server 数据库的操作却有着不同.那么,有哪些不同呢? 首先,需要引用不同的类.因为有着不同的数据引擎. access:usin ...
- caffe_手写数字识别Lenet模型理解
这两天看了Lenet的模型理解,很简单的手写数字CNN网络,90年代美国用它来识别钞票,准确率还是很高的,所以它也是一个很经典的模型.而且学习这个模型也有助于我们理解更大的网络比如Imagenet等等 ...
- ModelMapper 中高级使用 java
ModelMapper 是一个java对象自动映射的第三方架包,用起来很方便,配合阿里的frstjson可以极大简化后台代码. 但是ModelMapper 中文使用说明很少,官网http://mode ...
- 存储过程 Row_number() 分页
---恢复内容开始--- 自己之前一直是使用的通用的存储过程 ,也是封装好的只要传表名 + 条件 等等 来到新环境 让自己写一个存储过程, 没办法 自己就需要写一个咯 之前写的比较多的是 按 top ...
- SQL添加维护 计划失败
在sql要求数据库每天自动备份这个是大家都会遇到的问题,我遇到了这个问题如图: 是因为这个服务组件没有安装
- jquery动态合并表格行
利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...
- 深入HashMap
HashMap: 内部基于数组和单向链表 重要的变量有: Entry<K,V>[] table = (Entry<K,V>[]) EMPTY_TABLE:结点数组table中存 ...
- squid 2.7 通过域名反向代理多个服务器的配置方法
详细配置及注释如下,供大家学习参考. visible_hostname squid1.abc.com #设定squid的主机名,如无此项squid将无法启动 http_port 80 accel vh ...
- windows
1.拷贝远程文件 net use \\10.130.80.62\ipc$ 密码 /user:用户名 xcopy "\\10.130.80.62\G$\yt\apache-tomcat-7.0 ...
- Dark Mobile Bank之移动银行应用仿冒攻击威胁分析报告
一.背景 据“第十五次全国信息网络安全状况暨计算机和移动终端病毒疫情调查”调查结果显示,2015年移动终端的病毒感染比例为50.46%,相对于2014年增长了18.96%,移动终端病毒感染率涨幅较大, ...