其实一开始是打算做成 Firefox only 的页面，好看看 IE6 下面究竟可以错位到何种地步，中午的时候看了一下 Google Analytics，IE 的访问量近乎一半……唉，没办法，只好放弃这个想法，认认真真做起了 IE hack。

IE6 中的 Carbonite 真是不看不知道一看吓一跳，错位得任务栏都认不出来了。自己搞了一个小时，不知道问题出在哪里。郁闷中打算听 Chris 的去 blueidea 发贴问问，谁知道 blueidea 的发贴方式实在是有够啰嗦，写了两行我写不下去了——还不如自己搞快呢。很幸运，找到了 13 styles，利用了一下人家的导航栏的代码，终于搞定了这个问题。

把两段代码都贴出来好了，以勉自己后来表再犯——

这个是(X)HTML部分——

Firefox only

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

ul#rootMenuItem{
float: left;
font-size: 14px;
line-height: normal;
list-style-type: none;
margin-left: 5px; /*Left offset of entire tab menu relative to page*/
}
#rootMenuItem li{
display: inline;
}
#rootMenuItem a{
float: left;
background: url(../images/root_menu_item_left.jpg) no-repeat left top;
margin-right: 5px; /*spacing between each tab*/
padding:0 0 0 6px;
text-decoration:none;
}
#rootMenuItem a span{
float: left;
display: block;
background: url(../images/root_menu_item_right.jpg) no-repeat right top;
height: 16px;
padding: 4px 9px 2px 3px;
font-weight: bold;
color: #000;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#rootMenuItem a span {float: none;}
/* End IE5-Mac hack */

#rootMenuItem a:hover span {
color: #FFF;
}
#rootMenuItem .current a{ /*Selected Tab style*/
background-position: 0 -22px; /*Shift background image up to start of 2nd tab image*/
}
#rootMenuItem .current a span{ /*Selected Tab style*/
background-position: 100% -22px; /*Shift background image up to start of 2nd tab image*/
color: #FFF;
}
#rootMenuItem a:hover{ /*onMouseover style*/
background-position:0% -22px; /*Shift background image up to start of 2nd tab image*/
}
#rootMenuItem a:hover span{ /*onMouseover style*/
background-position:100% -22px; /*Shift background image up to start of 2nd tab image*/
}

IE fixed

ul#rootMenuItem {
float: left;
font-size: 14px;
line-height: normal;
list-style-type: none;
margin-left: 7px; /*Left offset of entire tab menu relative to page*/
}
#rootMenuItem li {
display: block;
float: left;
margin: 0 1px;
}
#rootMenuItem li a {
display: block;
float: left;
color: #000;
text-decoration: none;
padding: 0 0 0 6px;
height: 22px;
line-height: 195%;
}
#rootMenuItem li a span {
padding: 0px 9px 0px 3px;
font-weight: bold;
}
#rootMenuItem li a:hover, #rootMenuItem li a.current {
color:#fff;
background: url(../images/root_menu_item_left.jpg) no-repeat left top;
}
#rootMenuItem li a:hover span, #rootMenuItem li a.current span {
display:block;
width:auto;
background: url(../images/root_menu_item_right.jpg) no-repeat right top;
}

教训——

  1. overflow不是可以乱用的；
  2. height+padding+margin 不是万能的——尤其对于IE6；
  3. 代码少有时候就是好。

Tags: ,