IE7的web标准之道——5：（修正）上去了！终于上去了！

saybody

浏览: 903636 次
性别:
来自: 西安

最近访客更多访客>>

morelily

juzhibest

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

<div style="border-right: teal 1px dotted; border-top: teal 1px dotted; font-size: 9pt; float: right; border-left: teal 1px dotted; width: 115px; color: teal; border-bottom: teal 1px dotted; text-align: center;">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road.png"><br>
IE7的web标准之道</div>
<p>IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？</p>
<p>且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！</p>
<h4>select对div说：“小样！就踩着你！”</h4>
<p>这个IE6一个很著名且诡异的bug，很简单，也很容易重现，说白了就是：列表框（select）一直把div踩在脚底下。因为这个bug，不知道多少浮动菜单被破坏。下面就模拟了这种情景，你可以运行代码来查看示例页面——</p>
<textarea id="txtTestCode2" rows="12" cols="65"> <!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">
#divMenu{
border:1px solid red;
width:150px;
}
#divUp{
position:absolute;
background-color:red;
width:100;
height:100px;
display:none;
}
</style>
</head>
<body>
<div id="divMenu" onmouseover="showMenu();" onmouseout="hideMenu();">这个是菜单哦</div>
<div id="divUp" onmouseover="showMenu();" onmouseout="hideMenu();">
<a target="_blank" href="http://www.cnblogs.com" title="博客园">博客园</a> <br/ />
<a target="_blank" href="http://justinyoung.cnblogs.com/" title="YES！B/S!">YES！B/S!博客</a> <br/ />
<a target="_blank" href="http://space.cnblogs.com/w3c/" title="web标准小组">【web标准小组】</a> <br/ />
</div>
<br/ />
<select id="ddlTest">
<option>下拉列表项1</option>
<option>下拉列表项2</option>
<option>下拉列表项3</option>
<option>下拉列表项4</option>
</select>


   function showMenu(){
    document.getElementById("divUp").style.display="block";
   }
   function hideMenu(){
    document.getElementById("divUp").style.display="none";
   }

</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>这个是示例页面分别在IE6、IE7、FireFox2、Opera（ver9.25）、Safari（windows3.04版）下的渲染效果图——</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road51.gif"></a><br>
多种浏览器渲染效果图</div>
<p>但是当鼠标移到菜单上，出现下拉菜单的时候，IE6的这个诡异bug就出现了——</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road52.gif"></a><br>
注意观察IE6中的列表框（图片经过后期拼接）</div>
<h4>div对iframe说：“大哥，select老是欺负我！”</h4>
<p>这个bug，我在<a title="如何让层盖住下拉列表框" href="http://www.cnblogs.com/JustinYoung/archive/2007/07/18/821868.html" target="_blank">《一个常被问道的问题：如何让层盖住下拉列表框？问题解决方案》</a>中介绍过。并且给出了供参考的解决方法。就是利用iframe来压select，然后div放在iframe中。但是这就如同请董卓进京来消灭宦官一样，代价太大了些。但是在IE6这样的乱世，也是一种没有办法的办法呀！有兴趣的朋友可以去阅读那篇文章。</p>
<h4>IE7说：“社会解放了！div可以翻身做主人了”</h4>
<p>现如今IE7已经修正了这个bug，如果你网页浏览者多数已经在使用IE7，并且你不在乎那些IE6显示缺陷的话，完全可以不用再修正这个bug。毕竟，为了这么一个视觉上的bug，引入一个iframe，是有点浪费了……</p>
<p>至此，到了IE7时代，div终于可以老泪纵横地说道：“上去了！终于上去了！不再受到select的压迫，不用借助董卓iframe，凭着div我自己，凭着IE7大环境，我终于上去了！为了表达我激动的心情，我要把这幅对联献给IE7浏览器和千千万万的div同胞——”<br>
上联：<span style="padding-right: 2px; padding-left: 2px; padding-bottom: 0px; color: yellow; padding-top: 2px; font-family: courier; background-color: red;">昔日恶狼列表框横行霸道</span><br>
下联：<span style="padding-right: 2px; padding-left: 2px; padding-bottom: 0px; color: yellow; padding-top: 2px; font-family: courier; background-color: red;">如今web标准化主持公正</span><br>
横批：<span style="padding-right: 2px; padding-left: 2px; padding-bottom: 0px; color: yellow; padding-top: 2px; font-family: courier; background-color: red;">IE7好</span></p>
<p>呵呵～这股骚劲可能是<a title="博客园新春对联大赛" href="http://www.cnblogs.com/justinw/archive/2008/02/02/1062501.html" target="_blank">博客园新春对联大赛</a>后遗症囧rz~</p>
<h4>相关文章列表</h4>
<ul style="">
<li>
<a title="《IE7的web标准之道——1：前言》 " href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" target="_blank">《IE7的web标准之道——1：前言（兼目录）》 </a>
    </li>
<li>
<a title="IE7的web标准之道——2：（改进）更丰富的CSS选择符" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/20/IE7_wsRoad_selector.html" target="_blank">《IE7的web标准之道——2：（改进）更丰富的CSS选择符》</a>
    </li>
<li>
<a title="IE7的web标准之道——3：（修正）引起页面布局混乱的祸首" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/25/IE7_wsRoad_overflow.html" target="_blank">《IE7的web标准之道——3：（修正）引起页面布局混乱的祸首》</a>
    </li>
<li>
<a title="IE7的web标准之道——4：（修正）歌剧院魅影bug" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/03/IE7_wsRoad_dup_characters.html" target="_blank">《IE7的web标准之道——4：（修正）歌剧院魅影bug 》</a>
    </li>
<li>
<a title="《一个常被问道的问题：如何让层盖住下拉列表框？问题解决方案》" href="http://www.cnblogs.com/JustinYoung/archive/2007/07/18/821868.html" target="_blank">《一个常被问道的问题：如何让层盖住下拉列表框？问题解决方案》</a>
    </li>
<li>
<a title="《IE6和IE7共存方法（别人是别人的，我是我的）》" href="http://www.cnblogs.com/JustinYoung/archive/2007/09/11/889801.html" target="_blank">《IE6和IE7共存方法（别人是别人的，我是我的）》</a> </li>
</ul>

分享到：