自動的に中央に配置されるナビゲーション バーと関連する問題の例 DIV+CSS_CSS/HTML

これは今作ったナビゲーションバーです。4つのLINKを中央に配置するために、このように作成しましたが、完成してからたくさんの問題を見つけたので、書き留めて皆に共有します。

まず、このナビゲーションバーを見てみましょう。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テストジシュ</title> <style> /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none;} a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;} #nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;} #nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;} #nav li a{margin:1px;} p{ margin:50px 0; text-align:center; } </style> <div id="nav"> <ul> <li><a href="http://www.kijiji.cn" target="_blank">ホームページ</a></li> <li><a href="http://www.kijiji.cn/fabu" target="_blank">情報の公開</a></li> <li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料" target="_blank">顧客コレクション</a></li> <li><a href="http://blog.kijiji.com.cn/help/" target="_blank">ヘルプ</a></li> </ul> </div> <p><a href="http://www.zishu.cn" target="_blank">www.zishu.cn Zishu</a> 2006-09-11 早朝</p>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

質問:
1. LI ポイントが同じ行に書かれていない場合、スペースバグが発生します。上記のコードを実行してみましょう！

2. IE と FIREFOX の小さな違い (下の図を参照)。この小さな違いに気付かなかったら、CSS で「padding: 6px 15px 5px 15px;」と書くことはないでしょう。真ん中の縦線を上下の線につなげてください！ (IE6 と IE7 の間にはさらに小さな違いがあります);


3. #nav li a{margin:1px;} という行は役に立ちませんか?そう思う場合は、削除して試してみて、うまくいくかどうかを確認してください。

4. 特定の時間にズームするとページが折り返されます。この問題を解決するには、FIREFOX では min-width を使用しますが、IE では min-width が認識されないため、式((documentElement) のみを使用できます。 .clientWidt.... これが解決策です! 行を改行したくない場合は、上の #nav 行を次のように変更してください:

コードをコピーします コードは次のとおりです。

#nav{height:24px;ソリッド #D28A05; border-top:1px ソリッド #D28A05;background-image: url(nav_bg.jpg);background-color: #FF9900; text-align:center;min-width:400px;width:expression((documentElement. clientWidth

基本的に、このフィールドには多くの問題があるため、自分で行うことをお勧めします。
また、このブログは FIREFOX では見苦しくなりますので、とりあえず見てください。
もう 1 つ: 私が書いたものには必ず問題が発生します。何かあればご指摘いただければ幸いです