前端编程提高之旅（三）----浏览器兼容之IE6
在爱奇艺实习期间，乐帝主要负责移动端活动页面的制作，因为移动浏览器是随着智能手机兴起的，这就决定了移动端不会重蹈浏览器兼容问题的覆辙。一開始就比較好的支持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>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
- 不管是“宽度”的内容过长，还是“高度”的内容过长，都会引发此bug。
- 不管是文字、图片。还是随意有宽度和高度概念的“可见元素”，它们的“过宽”和“过高”都会引发此bug。
- 随意有宽度和高度概念的“可见元素”,它们在默认状态下的“overflow”样式的值都是“Visible”（即使你没有设置这个样式）
从条件不难看出，图片或者文字内容超出父级div原有设置大小，都会触发bug。
- 设置外层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>
怎样才干让容器在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>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
- 一个容器包括2两个具有“float”样式的子容器。
- 第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3。
（说到3，这里略微多说一句——IE7还修正了IE6中的一个bug，bug名字就叫做“3像素bug”）
- 在第二个容器前存在凝视（这也是为什么此bug也叫做“IE6凝视bug”的原因）。
乐帝查看了凝视bug在ietest不能复现这种问题，有待考证。
- 改变结构。不出现【一个容器包括2两个具有“float”样式的子容器】的结构。
- 减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3，比如将本文演示样例中第二个子容器的宽度改为197px。
- 去掉全部的凝视。
——此解决方式的评论：最直接的做法，可是“没有凝视的代码”，的确不是一个好的代码写作习惯。 - 修正凝视的写法。将 <!-- 这里是凝视内容 -->写成<!--[if !IE]>这里是凝视内容<![endif]-->
——此解决方式的评论：还不错的解决方式，可是并非每一个人都对<!--[if !IE]>这里是凝视内容[endif]-->这样的凝视写法非常赞赏。 - 在第二个容器后面加一个或者多个<div style="clear"></div>来解决。
——此解决方式的评论：另人感觉非常不爽的解决方式。可是的确能解决。影响网页效率
以上解决方式中。都是针对bug出现的条件针对性的改动，个人觉得最后一条解决方式较好。
<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
这个bug引发的条件极其简单，仅仅要对块状容器元素设置了float和与float同样方向的margin值就会出现。
<!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>
从上面网页中的网格刻度线不难看出IE6双边距bug问题。
.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;
前端编程提高之旅（三）----浏览器兼容之IE6的更多相关文章
- 前端编程提高之旅（五）----写给大家看的css书
自实习也有几个月的时间了,以爱奇艺实习为敲门砖.进入了眼下这家公司.假设说当初能进爱奇艺是暂时袭击DIV+CSS的话,眼下在这家公司体验到.不论什么技术都必须悉知原理,这样才干做到庖丁解牛.做一 ...
- 前端编程提高之旅（十二）----position置入值应用
这次内推项目用到的遮罩及其页面下方button都涉及一个概念position置入值得概念.效果图例如以下: 一个元素position属性不是默认值static.那么该元素被称为定位元素. 定位的元素生 ...
- 前端编程提高之旅（六）----backbone实现todoMVC
乐帝当年学习backbone时.最開始是看官网todoMVC的实现.后来了解到requireJS便于管理JS代码.就对官网代码做了requireJS管理.但此时乐帝感觉此时的t ...
- 前端编程提高之旅（十）----表单验证插件与cookie插件
实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找. ...
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 抛弃 CSS Hacks 后的浏览器兼容方案
一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本,当然在 IE9 开始逐步推向市场后,又会有更多的衍生版本.所以我目前只考虑 IE7~9 版本的兼容情况.涉及到的条件注释代码如下: & ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- web前端~~浏览器兼容问题（百度）
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 【转】Web前端浏览器兼容初探
原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...
随机推荐
- javascript 动态添加城市
匿名函数的使用 createTextnode 创建文本 createElement 创建元素 appendChild 将文本或元素追加 <!DOCTYPE html> < ...
- 计蒜客 ACM竞赛高校联盟训练赛 第8场 煎牛排
水一水. https://nanti.jisuanke.com/t/24205 煎牛排 题目描述 又是一个难得的周六,是时候远离食堂和外卖出去大吃一顿了.圈内知名吃货AA正想着中午去吃汉堡炸鸡烤肉火锅 ...
- 语义分割丨PSPNet源码解析「训练阶段」
引言 之前一段时间在参与语义分割的项目,最近有时间了,正好把这段时间的所学总结一下. 在代码上,语义分割的框架会比目标检测简单很多,但其中也涉及了很多细节.在这篇文章中,我以PSPNet为例,解读一下 ...
- Kali Linux 2017.1脚本gerix.py修复
Kali Linux 2017.1脚本gerix.py修复 Gerix是一款优秀的图形界面的无线渗透工具.从Kali Linux 2016.2开始,该工具在Kali Linux中运行就存在一些问题 ...
- Idea下Maven的使用
一.导入maven结构的web工程 (1)在Intellij IDEA中选择File->New->Project from Version Control->Subversion. ...
- 蒙特卡洛法MATLAB
%%unifrnd函数的使用 %unifrnd函数可以创建随机的连续均匀分布的数组,一般式为R=unifrnd(A,B); %A和B是标量或者相同维数的行向量或者列向量.R=unifrnd(A,B,[ ...
- VS2010 MFC中 创建文件夹及文件判空的方法
1. MFC中 创建文件夹的方法如下: CString strFolderPath = "./Output"; //判断路径是否存在 if(!PathIsDirectory(str ...
- 2016.8.22 Axure两级下拉框联动的实现
刚学Axure,有些很简单的东西都要弄很久,但是弄出来的总归是很开心的. 参考来自:实现省市县下拉框的三级联动 http://www.woshipm.com/rp/348795.html/commen ...
- Linux下快速安装Mysql及使用
1.安装 查看有没有安装过: yum list installed mysql* rpm -qa | grep mysql* 查看有没有安装包: yum list mysql* 安装mysql客户端: ...
- BZOJ 4128 Matrix BSGS+矩阵求逆
题意:链接 方法: BSGS+矩阵求逆 解析: 这题就是把Ax=B(mod C)的A和B换成了矩阵. 然而别的地方并没有修改. 所以就涉及到矩阵的逆元这个问题. 矩阵的逆元怎么求呢? 先在原矩阵后接一 ...