在爱奇艺实习期间，乐帝主要负责移动端活动页面的制作，由于移动浏览器是随着智能手机兴起的，这就决定了移动端不会重蹈浏览器兼容问题的覆辙，一开始就比较好的支持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>
<style type="text/css">
#txtName{
border:1px solid #eee;
}
#txtName:hover{
border:1px solid black;
}
</style>
</head>
<body>
<input type="text" id="txtName" />
</body> 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> 
<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><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><!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>
<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><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;
}<!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条件：前端编程提高之旅（三）----浏览器兼容之IE6,布布扣,bubuko.com
原文：http://blog.csdn.net/yingyiledi/article/details/38708405