ひっそりと咲いています

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}

この変更の場合