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

IE7的web标准之道

IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？

且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！

select对div说：“小样！就踩着你！”

这个IE6一个很著名且诡异的bug，很简单，也很容易重现，说白了就是：列表框（select）一直把div踩在脚底下。因为这个bug，不知道多少浮动菜单被破坏。下面就模拟了这种情景，你可以运行代码来查看示例页面——

<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: rgba(153, 153, 153, 1)">提示：可以先在文本框内，根据需要修改代码后再运行</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" rel="nofollow"><img alt="IE7的web标准之道——5：（修正）上去了！终于上去了！" src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZhVzFoWjJWekwyTnVZbXh2WjNOZlkyOXRMMnAxYzNScGJubHZkVzVuTHpJd01EaGZNWEV2YVdVM2NtOWhaRFV4TG1kcFpnPT0=" title="IE7的web标准之道——5：（修正）上去了！终于上去了！"></a><br> 多种浏览器渲染效果图</div> <p>但是当鼠标移到菜单上，出现下拉菜单的时候，IE6的这个诡异bug就出现了——</p> <div class="floatMPic"> <a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank" rel="nofollow"><img alt="IE7的web标准之道——5：（修正）上去了！终于上去了！" src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZhVzFoWjJWekwyTnVZbXh2WjNOZlkyOXRMMnAxYzNScGJubHZkVzVuTHpJd01EaGZNWEV2YVdVM2NtOWhaRFV5TG1kcFpnPT0=" title="IE7的web标准之道——5：（修正）上去了！终于上去了！"></a><br> 注意观察IE6中的列表框（图片经过后期拼接）</div> <h4>div对iframe说：“大哥，select老是欺负我！”</h4> <p>这个bug，我在<a title="如何让层盖住下拉列表框" href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9KdXN0aW5Zb3VuZy9hcmNoaXZlLzIwMDcvMDcvMTgvODIxODY4Lmh0bWw=" target="_blank" rel="nofollow">《一个常被问道的问题：如何让层盖住下拉列表框？ 问题解决方案》</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: 2px 2px 0; color: rgba(255, 255, 0, 1); font-family: courier; background-color: rgba(255, 0, 0, 1)">昔日恶狼列表框横行霸道</span><br> 下联：<span style="padding: 2px 2px 0; color: rgba(255, 255, 0, 1); font-family: courier; background-color: rgba(255, 0, 0, 1)">如今web标准化主持公正</span><br> 横批：<span style="padding: 2px 2px 0; color: rgba(255, 255, 0, 1); font-family: courier; background-color: rgba(255, 0, 0, 1)">IE7好</span></p> <p>呵呵～这股骚劲可能是<a title="博客园新春对联大赛" href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9qdXN0aW53L2FyY2hpdmUvMjAwOC8wMi8wMi8xMDYyNTAxLmh0bWw=" target="_blank" rel="nofollow">博客园新春对联大赛</a>后遗症 囧rz~</p> <h4>相关文章列表</h4> <ul style="list-style-type: disc"> <li> <a title="《IE7的web标准之道——1：前言》 " href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9KdXN0aW5Zb3VuZy9hcmNoaXZlLzIwMDgvMDIvMTgvSUU3X3dzUm9hZF9mb3Jld29yZC5odG1s" target="_blank" rel="nofollow">《IE7的web标准之道——1：前言（兼目录）》 </a> </li> <li> <a title="IE7的web标准之道——2：（改进）更丰富的CSS选择符" href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9KdXN0aW5Zb3VuZy9hcmNoaXZlLzIwMDgvMDIvMjAvSUU3X3dzUm9hZF9zZWxlY3Rvci5odG1s" target="_blank" rel="nofollow">《IE7的web标准之道——2：（改进）更丰富的CSS选择符》</a> </li> <li> <a title="IE7的web标准之道——3：（修正）引起页面布局混乱的祸首" href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9KdXN0aW5Zb3VuZy9hcmNoaXZlLzIwMDgvMDIvMjUvSUU3X3dzUm9hZF9vdmVyZmxvdy5odG1s" target="_blank" rel="nofollow">《IE7的web标准之道——3：（修正）引起页面布局混乱的祸首 》</a> </li> <li> <a title="IE7的web标准之道——4：（修正）歌剧院魅影bug" href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9KdXN0aW5Zb3VuZy9hcmNoaXZlLzIwMDgvMDMvMDMvSUU3X3dzUm9hZF9kdXBfY2hhcmFjdGVycy5odG1s" target="_blank" rel="nofollow">《IE7的web标准之道——4：（修正）歌剧院魅影bug 》</a> </li> <li> <a title="《一个常被问道的问题：如何让层盖住下拉列表框？ 问题解决方案》" href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9KdXN0aW5Zb3VuZy9hcmNoaXZlLzIwMDcvMDcvMTgvODIxODY4Lmh0bWw=" target="_blank" rel="nofollow">《一个常被问道的问题：如何让层盖住下拉列表框？ 问题解决方案》</a> </li> <li> <a title="《IE6和IE7共存方法（别人是别人的，我是我的）》" href="/default/index/url?u=aHR0cDovL3d3dy5jbmJsb2dzLmNvbS9KdXN0aW5Zb3VuZy9hcmNoaXZlLzIwMDcvMDkvMTEvODg5ODAxLmh0bWw=" target="_blank" rel="nofollow">《IE6和IE7共存方法（别人是别人的，我是我的）》</a> </li> </ul>