webページのナビゲーションを修正しました

フラーワーフェスタ
Webページの表示にて、IEでだけ ul>liグローバルメニューが下側にズレていることに気づきました。
FireFox,Safari,Chromeでは普通に表示しているので、IEだけで起こっているようです。
普段は,FirefoxとChromeを使っているのでまったく気ずきませんでした。なぜ気がついたのか、この直前にセキュリティソフト
のマカフィーが自動更新を失敗して、ブラウザーでの表示がおかしくなってしまい。
IEを使っての修正インストール作業をしたので、この表示の異常に気づきました。
当初、Webページを作ったころは、IEでもチェックしているので、正常に表示していたはずです。
年数が立ち、ウィンドウズのバージョンもIEのバージョンも上がっていった時、ちゃんとチェックしていなかったのです。
IEに限らずバージョンが上がった時はチェックが必要です。
修正の記録を以下に記載します。
サンプル
ul>liでリスト要素を横並びにするのですが以下,元々のHtmlとcssサンプルは
sample.html
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF8">
<link ref = "stylesheet" href = "style.css>
<title>興味津々
</head>
<body>
<h3> </h3>
<ul class="foo">
<li><a href = "#" > HOME </a></li>
<li><a href = "#" > page1 </a></li>
<li><a href = "#" > page2 </a></li>
<li><a href = "#" > page3 </a></li>
<li><a href = "#" > page4 <a><li>
</ul>
</body>
</html>
sample.css
ul li{
float : left}
ul li a{
display : block}
いろいろためしてみたのですが、どうもうまく行かなっかたのですが
配置の方法を
float:left を中止して inline-block を使った
ul li{
display : inlinblock}
この変更の場合
<li>....</li><li>....</li>と続けると可視性が悪くなるので
終了タグ</li>の省略する方法を採用(html5では可能らしい)
とりあえずズレなく表示するようになりほっとしています。