Firefoxで見るとli要素レイアウトが崩れます

質問

http://thai-kosiki.net/のサイトです。

フッターメニュー（リンク集～お問い合わせ）の部分がIEやchromeでは思ったように表示されるのですが、FirefoxやiPhoneで見ると、li要素の一番最後の文字（リンク集だと集）が下に落ちてしまいます。

ブラウザーの倍率はどちらも100％でみています。li要素やul要素の文字の大きさを小さく設定してみたり、li要素の間隔を開けてみたり試してみたのですが、うまくいきません。

フッター部分に設定したCSSです。

div#footer {
width: 100%;
height: 105px;
background-repeat: repeat;
background-position: left top;
background-color: #FFF;
border-top-width: thin;
border-top-style: solid;
border-top-color: #DFDBDC;
clear: both;
font-size: 75%;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
div#footer-inner {
width: 1000px;
height: 105px;
text-align: left;
position: relative;
margin-right: auto;
margin-left: auto;
}
.footer-nav {
position: absolute;
left: 308px;
top: 30px;
width: 508px;
}

.footer-nav li {
float: left;
list-style-position: inside;
list-style-image: url(../img/common/arrow.png);
}
.copyright {
position: absolute;
display: inline-block;
width: 177px;
left: 823px;
top: 30px;
}

absoluteを使っているのが問題なのでしょうか？
FirefoxやiPhoneで見てもレイアウトが崩れないようにするにはどうしたらいいのでしょうか？
間違っている点や追加した方がいい点などがありましたら教えてください。
どうぞよろしくお願いします。

回答No.1

SeydaNeen · ベストアンサー

確かにウチの環境でもずれています。
.footer-nav li {

の要素に
white-space: nowrap;
margin: 0 0.5em;
を入れたみたらどうでしょうか。

0.5emの部分は、まあ適当に調整するとして、ですけど。

お礼

うまくいきました！ありがとうございます。