很老的 bug了，详细描述看下面几篇文章吧：
文中给出的方法简单明了，不过有时页面比较复杂，只有通过用JS遍历 position:relative 元素并改变其 z-index 值来解决了。有了 JS 框架则更加简单。《Fixing IE z-index》分别给出了 jQuery 和 MooTools 版本，下面是 jQuery 版本的代码：
$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$("div").each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});DEMO 在此
身为greader的重度用户，之前写过stylish，今天来简单分析下其中关于body的一点小技巧。
IE6：
<body class="ie ie6 loaded">IE7：
<body class="ie ie7 loaded">IE8：
<body class="ie ie8 loaded">GECKO内核（firefox/flock等）：
<body class="gecko loaded">WEBKIT内核（safari/chrome等）：
<body class="webkit loaded">以上值通过JS判断当前浏览器后给body的class赋值。
当然，并不是每种浏览器都利用到了相应的class，部分是预留的，CSS中只用到了以下部分：
.gecko .goog-inline-block{display:-moz-inline-box;}
.gecko .goog-inline-block{display:inline-block;}
.ie6 .goog-inline-block{display:inline;}
.ie7 .goog-inline-block{display:inline;}这段代码是为了实现跨浏览器的display:inline-block，其中只用到了gecko/ie6/ie7这三个class
当界面隐藏侧边栏时（以firefox为例）：
<body class="gecko loaded lhn-hidden">body增加了lhn-hidden的class：
.lhn-hidden #chrome-lhn-toggle-icon{border-color:#ebeff9 #ebeff9 #ebeff9 #68e;border-width:5px 0 5px 5px;}
.lhn-hidden #chrome-lhn-toggle:hover #chrome-lhn-toggle-icon{border-left-color:#fff;}
.lhn-hidden #nav{display:none;}
.lhn-hidden #chrome{margin-left:0;}
.lhn-hidden #chrome-title{display:inline;}
.lhn-hidden #entries .entry-body{max-width:100%!important;}通过给body添加/删除class="lhn-hidden"来实现侧边栏的显示隐藏，实现了结构、表现、行为的高度分离！
用jquery的话则变得更加简单，JS只需以下几句：
$('#chrome-lhn-toggle').click(function(){
$('body').toggleClass('lhn-hidden');
})这样书写及维护起来非常方便。
众所周知的GR彩蛋:上上下下左右左右BA，就是通过给 body 增加 class 实现的
<body class="konami">konami 的 css 如下：
.konami #sub-tree{background:#006f89 url(/reader/ui/1466947354-ninja-sidebar.gif) repeat-y left 0;}
.konami .lhn-section{background-color:#006f89;}
.konami .scroll-tree li{background:transparent;}
.konami .entry .entry-actions .star, .konami .entry .entry-actions .like, .konami .entry .entry-actions .read-state, .konami .entry .entry-actions .broadcast, .konami .entry .entry-actions .broadcast-with-note, .konami .entry .entry-actions .email, .konami .entry .entry-actions .item-link, .konami .entry .entry-actions .tag, .konami .entry .entry-icons .star, .konami .entry-likers-n .number-of-likers{background-image:url(/reader/ui/3207170781-konami-action-icons.png);}
.konami-like-image{position:absolute;}
问题如下图：
解决思路：
代码（基于jQuery）：
$(function() {
$(".ProductAttributesSelect")
.mouseover(function(){
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto");
})
.mouseout(function(){
$(this).css("width", $(this).data("origWidth"));
});
});英文雅虎的注册页面有DEMO，童鞋们可以去围观下，O(∩_∩)O~
