昨天用ucweb看到了goos發的一篇帖子：誰說Float菜單不可以水平居中，進去看了看，覺得方法有點繁瑣了，用到了負邊距，position:relativel; 和很少的一點hack。
我這裡還有更簡單的辦法，先展示：
其實我外面應該再套一個div，但為了減少碳排放，捨棄。
運行代碼框
<!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" />
<style type="text/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:none;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#navigation li{height:30px;float:left;}
#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
#navigation li a:hover{background:#59c099;color:#fff;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>float菜單局中一法</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Group</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Help</a></li>
</ul>
</body>
</html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]
其中最為關鍵的是這一句：
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
為了照顧較低版本IE，這裡使用了條件註釋，感覺在IE7以下中，display:inline;的作用就相當於inline-block;。
根據上面代碼進化而來的滑動門導航：
運行代碼框
<!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" />
<style type="text/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:none;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#navigation li{height:30px;float:left;}
#navigation li a{float:left;background:#97C099 url(<a href=") left top no-repeat;padding-left:27px;height:30px;overflow:hidden;}
#navigation li a span{height:30px;float:left;background:url(<a href=") right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}
#navigation li a:hover span,#navigation li.current a span{background-position:right -528px;}
#navigation li.current a{font-weight:bold;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>根據上面代碼升級為滑動門樣式</title>
</head>
<body>
<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li class="current"><a href="#"><span>Store</span></a></li>
<li><a href="#"><span>Group</span></a></li>
<li><a href="#"><span>Community</span></a></li>
<li><a href="#"><span>Help</span></a></li>
</ul>
</body>
</html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]
其中，這兩句有必要說明一下，以免被認為是多餘的：
#navigation li a{overflow:hidden;} /* 隱藏掉IE5.5、6多掉的那3px，不是3px bug哈！因為height:30px;line-height:33px; 在IE5.5、6中高度就是33px了。 */
#navigation li a span{cursor:hand;}/* 照顧IE 5.5、6、7鼠標放在span上面不呈手型的bug。此外，IE5.5不支持cursor:pointer;但IE全版本都認識cursor:hand;*/
完工了，缺點就是，寫那一行條件註釋，對於有xhtml潔癖的人來說，就像眼裡的沙子，想除掉，那就使用hack也無妨！呵呵！
在safari4，chorme，opera10，ie5.5、5、6、7,ff3中均暫未發現問題。