前端编程提高之旅(三)----浏览器兼容之IE6
2017-05-22 18:02 tlnshuju 阅读(182) 评论(0) 编辑 收藏 举报在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,因为移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙。一開始就比較好的支持web标准,而纵观整个互联网行业,移动web开发还处于起步阶段,在非常长一段时间pc端web作为基本的服务形式还会继续。从小来说作为一名前端开发者。不了解浏览器兼容也会贻笑慷慨。这篇文章基于《IE7web标准之道》。对浏览器兼容做一个概览。
时间到了2014年,大概非常少人会想到IE7公布之后,时隔这么多年IE6仍然占领市场7%的浏览器份额。假设开发面向大众的产品。7%的份额仍然不可忽视。
百度提供了一个统计界面可查看浏览器份额。IE8和chrome占领了主要市场,在未来的一段时期内IE6仍然“发挥余热”。
那么来看看IE6兼容问题。
1.没有那么多选择器
<style type="text/css"> a[target="_blank"]{ padding-right:16px; background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/common/outLink.gif') no-repeat right; } </style> </head> <body> <p> <a href="#" title="我不会跳转到其它站点。不会再新窗体打开">我不会跳转到其它站点,不会再新窗体打开</a> </p> <p> <a href="http://www.163.com" title="我会跳转到其它的站点,会在新窗体打开" target="_blank">我会跳转到其它的站点,会在新窗体打开</a> </p> </body>
这段代码给出了链接是否会跳转走的提示样式。像这种选择器,如乐帝入行不久的人。用的都比較自然。读史使人明智,不读浏览器的进化史,不知IE6有多原始,IE6对照较复杂的css选择器都不支持,所以开发面向IE6的代码时,css选择器“简单粗暴”是比較好的方式。
<style type="text/css"> #txtName{ border:1px solid #eee; } #txtName:hover{ border:1px solid black; } </style> </head> <body> <input type="text" id="txtName" /> </body>
IE6是不支持随意元素实现伪类的。
这一点比較现代的css伪类选择器的确使网页效果更绚丽。至于还有哪些不能用请參考(此页面)。
2.IE6到现代浏览器引起布局混乱的原因
w3c仅仅是说。超出容器的内部不会被剪切。
可是它并没有说,超出来的内容能够“撑开”容器。所以以下这个样例中IE7和FireFox的解释和渲染是正确的,而IE6则是错误的(由于它错误的觉得,仅仅有让容器内的内容“撑开”容器,才干让容器内的内容在超出时不被剪切)。
<style type="text/css"> #div1{ border:1px solid red; width:50px; /*word-wrap: break-word; */ /*不同意内容撑开父容器,否则会出现IE6与其它浏览器布局显示不一致,造成混乱的问题。overflow: hidden;会影响内容正常显示*/ } </style> </head> <body> <div id="div1"> alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a> </div>
- 不管是“宽度”的内容过长,还是“高度”的内容过长,都会引发此bug。
- 不管是文字、图片。还是随意有宽度和高度概念的“可见元素”,它们的“过宽”和“过高”都会引发此bug。
- 随意有宽度和高度概念的“可见元素”,它们在默认状态下的“overflow”样式的值都是“Visible”(即使你没有设置这个样式)
- 设置外层div的css属性“word-wrap: break-word”解决。
- 用“overflow: hidden”解决。
- 就是依据宽度,将文本截取成多段,在每段后面强制加上换行符。
低三种方案函数例如以下:
<script type="text/javascript"> // <![CDATA[ if(document.getElementById && !document.all) wordWarp4ff(6)/*数值6依据宽度须要发生变化*/ function wordWarp4ff(intLen){ var obj=document.getElementById("div1"); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; //每六个字符加一个空格分隔,加入到暂时的字符串中 strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } // ]]> </script>
纵向伸展的bug
怎样才干让容器在IE7和FireFox中可以自适应高度呢?事实上非常easy,也是IE7的重要改进之中的一个,使用“min-height”样式。尽管IE7中已经支持“min-height/min-width”和"max-height/max-width"样式。
可是IE6却不认识这些"min-"、"max-"开头的样式,所以,我们还须要使用一个css hack为IE6设置一个“height”。仅仅让IE6认识,IE7和FireFox都不认识。
<style> * { margin: 0; padding: 0; } #header { width: 600px; /*height:50px;凝视掉以下两句,放出这一句,在FireFox和IE7中便能呈现bug*/ min-height:50px;/*仅仅设置最小高度,让IE7和FireFox自适应高度*/ _height: 50px;/*採用仅仅有IE6才认识到css hack,让不认识min-height的IE6也有非常好的兼容性。*/ background-color: red; margin:0 auto;/*居中显示*/ } #body{ width:600px; margin:0 auto;/*居中显示*/ background-color:blue; } #footer{ width:600px; margin:0 auto; background-color:#666; clear:both;/*clear:both,让footer在新的一行显示,非常多朋友对clear理解的不够透彻。我以后会特意出篇文章介绍这个样式,有兴趣的朋友能够关注我的博客http://justinyoung.cnblogs.com*/ } </style> </head> <body> <div id="header"> 这里是头部的内容。<br/> 可能有站点标题,就像<a target="_blank" href="" title="">博客园</a>博客的标题、副标题。<br/> 也可能有导航栏在这里<br/> <strong>注意这句话在IE7中的显示1</strong><br/> <strong>注意这句话在IE7中的显示2</strong><br/> </div> <div id="body"> 这里是主体的内容。随便你写啦。
我就写上我的博客地址吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web标准之道">YES!
B/S!
</a> <p> 专注于B/S模式的项目。姓名:杨正祎(Justin Young)。程序猿,专注于B/S模式的项目开发,擅长于Web标准页面设计。</p> <p>欢迎你们来为我的博客做客哦,里面有非常多关于web标准方面的文章哦。请你们多多不吝赐教。</p> <p>最后还要非常华丽的署名——杨正祎</p> <p>日期当然也不能少啦——2008-2-21</p> </div><!--end: body --> <div id="footer"> 这里是footer。就放一些版权信息吧。©<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web标准之道">YES!
B/S!
</a> </div><!--end: footer --> </body>
3.IE6反复文字bug
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" /> <meta name="Description" content="这是一个简单YES!B/S!文章演示样例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章演示样例页面</title> </head> <body> <div style="width:200px;"> <div style="float:left;"></div> <!-- 假设是IE6。你将多看到一个“影”字 --> <div style="float:left;width:200px;">歌剧院的魅影</div> </div> </body> </html>
- 一个容器包括2两个具有“float”样式的子容器。
- 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3。
(说到3,这里略微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”)
- 在第二个容器前存在凝视(这也是为什么此bug也叫做“IE6凝视bug”的原因)。
- 改变结构。不出现【一个容器包括2两个具有“float”样式的子容器】的结构。
- 减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,比如将本文演示样例中第二个子容器的宽度改为197px。
- 去掉全部的凝视。
——此解决方式的评论:最直接的做法,可是“没有凝视的代码”,的确不是一个好的代码写作习惯。 - 修正凝视的写法。将 <!-- 这里是凝视内容 -->写成<!--[if !IE]>这里是凝视内容<![endif]-->
——此解决方式的评论:还不错的解决方式,可是并非每一个人都对<!--[if !IE]>这里是凝视内容[endif]-->这样的凝视写法非常赞赏。 - 在第二个容器后面加一个或者多个<div style="clear"></div>来解决。
——此解决方式的评论:另人感觉非常不爽的解决方式。可是的确能解决。影响网页效率
<style type="text/css"> #divUp{ z-index:99; position:absolute; background-color:red; width:100; height:18; overflow:hidden; height:60px; } #ddlTest{ width:200; z-index:1; } </style> <body> <div id="divUp">aaaaaaa<br>bbbbbbb<br>ccccccc</div> <br/> <select id="ddlTest"><option>test0<option>test1<option>test2<option>test3</select> </html>
<style type="text/css"> body{ font-size:small; } #zindexDiv{ position:absolute; z-index:50; width:expression(this.nextSibling.offsetWidth); height:expression(this.nextSibling.offsetHeight); top:expression(this.nextSibling.offsetTop); left:expression(this.nextSibling.offsetLeft); /*background-color:green;在ff中将这句话放出来。你就会明确京叭、狼狗、主人的比喻*/ } #divUp{ z-index:99; position:absolute; background-color:red; width:100; height:18; overflow:hidden; height:60px; } #ddlTest{ width:200; z-index:1; } </style> <body> <iframe id="zindexDiv" frameborder="0"></iframe> <div id="divUp">aaaaaaa<br>bbbbbbb<br>ccccccc</div> <br/> <select id="ddlTest"><option>test0<option>test1<option>test2<option>test3</select> </html>
5.置换元素与行距的bug
<style type="text/css"> #lineheight_bug { line-height: 39px; font-size:14px; background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/rule.gif') no-repeat; padding:0; padding-left:20px; height:435px; width:530px; border:1px solid red; } </style> </head> <body> <div id="lineheight_bug"> <p>这是一个用来演示line-height bug的实例。它来自《IE7的web标准之道——6:(修正)置换元素与行距bug》一文。而这篇文章是属于《IE7的web标准之道》系列文章的。《IE7的web标准之道》系列文章是个文章系列。主要解说了IE7相对于IE6各个方面的修正和改进。 <img src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/wedgits_red.gif" alt="这就是置换元素的一种" /> 对于网页设计者从将网页设计从IE6平稳的过渡到IE7平台有一定的指导意义。如今《IE7的web标准之道》系列文章已经出道第六篇了。前面五篇的标题各自是:《IE7的web标准之道——1:前言(兼文件夹)》 ,《IE7的web标准之道——2:(改进)更丰富的CSS选择符》 ,《IE7的web标准之道——3:(修正)引起页面布局混乱的祸首 》 , 《IE7的web标准之道——4:(修正)歌剧院魅影bug 》 以及《IE7的web标准之道——5:(修正)上去了!最终上去了!
》。假设你有兴趣。能够訪问http://justinyoung.cnblogs.com/。谢谢。
</p> </div> </body>
#lineheight_bug img{ _margin:17px 0; _vertical-align: middle; }
6.float双倍margin bug
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,演示样例代码" /> <meta name="Description" content="这是一个简单YES!B/S!文章演示样例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章演示样例页面</title> <style type="text/css"> body{ background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/rule.gif') no-repeat; margin:0;padding:0; } .floatbox { float: left; width: 100px; height: 100px; background-color:deeppink; margin-top: 20px; margin-left:100px; } </style> </head> <body> <div class="floatbox"> </div> </body> </html>
.floatbox { float: left; width: 100px; height: 100px; background-color:deeppink; margin-top: 20px; margin-left:100px; display:inline; /*多设置这个样式就可以消除bug!*/ }2.通过CSS hack修正bug
.floatbox { float: left; width: 100px; height: 100px; background-color:deeppink; margin-top: 20px; margin-left:100px; _margin-left:50px;/*仅仅对IE6其作用的CSS hack,对数值减半*/ }7.内容隐藏的文章,乐帝的IEtest没有复现,这里不予讨论。
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" /> <meta name="Description" content="这是一个简单YES!B/S!文章演示样例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章演示样例页面</title> <style type="text/css"> .divOuter {/*事实上divOuter不是必须的,这里纯粹是为了提升视觉冲击力,你全然能够将其去掉*/ border:5px dashed green; padding:10px; } .divInner { border:3px solid red; padding:10px; } .testDiv1 { border:1px dotted deeppink; margin-top:10px; } .testDiv2 { border:1px solid blue; margin-top:-1px;/*这个是重点*/ } </style> </head> <body> <div class="divOuter"> <div class="divInner"> <div class="testDiv1">我是divInner里的第1个Div区域。我的margin-top是正数。</div> <div class="testDiv2">我是divInner里的第2个Div区域,我的margin-top是负值。</div> </div> </div> </body> </html>出现bug条件:
- 两个块状元素(#testDiv1和#testDiv2)
- 第二个块状元素(#testDiv2)有一个负值的margin-top
- 然后把这两个块状元素放在一个大的块状元素中(#divInner)
- 当然,为了他们都有可见的边框线(否则乱了你也看不到)
- 对#divInner设置一个position:relative;
- 对#testDiv2也设置一个position:relative;
- 对#testDiv2设置一个负值的top,比如top:-1px;