1

IE8で表示すると重大な問題があるサイトを引き継ぎました。それらの多くはdivに関連しているように見えますが、問題を解決するためにいくつかの助けを借りることができます.

私が現在取り組んでいる問題は、電話番号とフラグの div が 1 行ではなく 2 行で表示されていることです。これにより、ナビゲーション バーのコンテンツが押し下げられます。

URL: fertileweb.com/demosite (少し古いコピー、最新のものはローカルでホストされています)

IE8 ビュー: ! http://i.imgur.com/HaENEvu.jpg

IE10/firefox/chrome ビュー: ! http://i.imgur.com/q3mK5Bh.jpg

HTML

<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/USA.png">
(425) 646-4700
</li>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/canada.png">
(800) 394-2402
</li>
</ul>
</div>

CSS

.addressBox {
float: right;
padding-top: 35px;}

.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;}

.addressBox ul {
float: left;
list-style: none outside none;
margin-bottom: 10px;
width: 100%;}

.addressBox li {
color: #231F20;
display: inline;
float: left;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding-left: 17px;}

.addressBox li img {
float: left;
margin: 3px 7px 0 0;}

ありがとう！

4

4 に答える 4

0

理由は 100% わかりませんが、以下のコードを追加すると、コンテンツに対して要素が小さすぎないようにすることで問題が修正されました。これにより、テキストが折り返されます。その他の悪影響はありません。

.addressbox li {
width:133px;
}
于 2013-10-31T04:59:33.790 に答える
0

これを CSS スタイルに追加してみてください

.addresBox ul, .addresBox ul li {
  white-space:nowrap;   
}

問題は、ブラウザのバージョンではなくブラウザのサイズにあるようです。

于 2013-10-29T20:27:35.000 に答える