IE6BUG总结
滑动TAB切换代码
Feb
3
不浮动，用内敛盒子
IE6下不支持 可以模拟。
<!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>
<style type="text/css">
<!--
.nav {
MARGIN: 0px;
WIDTH: 100%;
FONT-FAMILY: verdana;
HEIGHT: 24px;
font-family:Arial, Helvetica, sans-serif;
LINE-HEIGHT: 24px;
}
.nav UL {
PADDING: 0px;
DISPLAY: block;
MARGIN: 0px;
LIST-STYLE-TYPE: none;
HEIGHT: 24px;
BACKGROUND-COLOR: #c5dbf2;
COLOR: #ffffff;
text-align:center;
}
.nav LI {
DISPLAY: inline-block;
*display:inline;*zoom:1;
HEIGHT: 24px;
font-family:Arial, Helvetica, sans-serif;
LINE-HEIGHT: 24px;
WIDTH: 82px;
text-align:center;
}
.nav LI A {
PADDING:1px 15px 0;
DISPLAY: block;
FONT-WEIGHT: none;
COLOR: #000;
LINE-HEIGHT: 24px;
TEXT-DECORATION: none;
}
.nav LI A:hover {
COLOR:#562505;
BACKGROUND-COLOR: #2687eb;
TEXT-DECORATION: none;
}
-->
</style>
</head>
<body>
<DIV class="nav">
<UL>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=154" >文 秘</A></LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=155" >接 待</A> </LI>
<LI><a href="{$InstallDir}Department/ShowClass.asp?ClassID=156" >信 息</a> </LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=157" >通 信</A> </LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=158" >治 安</A> </LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=159" >档 案</A> </LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=160" >后 勤</A> </LI>
</UL>
</DIV>
</body>
</html>
块转换内联盒子的话，display:inline;zoom:1;
display是转换了内联了，但是他里面也包块，块是会换行的，所以内联里面控制不了块，必须zoom 激发IE的HS属性，这样就模拟出内联盒子了，可以包含块了。
内联转内联盒子，很容易，直接 inline-block 激发了 HS
IE6下不支持 可以模拟。
<!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>
<style type="text/css">
<!--
.nav {
MARGIN: 0px;
WIDTH: 100%;
FONT-FAMILY: verdana;
HEIGHT: 24px;
font-family:Arial, Helvetica, sans-serif;
LINE-HEIGHT: 24px;
}
.nav UL {
PADDING: 0px;
DISPLAY: block;
MARGIN: 0px;
LIST-STYLE-TYPE: none;
HEIGHT: 24px;
BACKGROUND-COLOR: #c5dbf2;
COLOR: #ffffff;
text-align:center;
}
.nav LI {
DISPLAY: inline-block;
*display:inline;*zoom:1;
HEIGHT: 24px;
font-family:Arial, Helvetica, sans-serif;
LINE-HEIGHT: 24px;
WIDTH: 82px;
text-align:center;
}
.nav LI A {
PADDING:1px 15px 0;
DISPLAY: block;
FONT-WEIGHT: none;
COLOR: #000;
LINE-HEIGHT: 24px;
TEXT-DECORATION: none;
}
.nav LI A:hover {
COLOR:#562505;
BACKGROUND-COLOR: #2687eb;
TEXT-DECORATION: none;
}
-->
</style>
</head>
<body>
<DIV class="nav">
<UL>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=154" >文 秘</A></LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=155" >接 待</A> </LI>
<LI><a href="{$InstallDir}Department/ShowClass.asp?ClassID=156" >信 息</a> </LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=157" >通 信</A> </LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=158" >治 安</A> </LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=159" >档 案</A> </LI>
<LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=160" >后 勤</A> </LI>
</UL>
</DIV>
</body>
</html>
块转换内联盒子的话，display:inline;zoom:1;
display是转换了内联了，但是他里面也包块，块是会换行的，所以内联里面控制不了块，必须zoom 激发IE的HS属性，这样就模拟出内联盒子了，可以包含块了。
内联转内联盒子，很容易，直接 inline-block 激发了 HS
