1

我继承了一个在 IE8 中显示时存在重大问题的网站。看起来它们中的很多都与 div 相关，但我可以使用一些帮助来解决问题。

我现在正在处理的问题是电话号码和标志的 div 显示在两行上，而不是一行。这最终会向下推导航栏的内容。

网址：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

尝试将其添加到您的 CSS 样式中

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

问题似乎与浏览器大小而不是浏览器版本有关。

于 2013-10-29T20:27:35.000 回答
0

如果没有自动换行，我建议使用该display: table;选项，如下所示：

.addressBox { display: table; width: 500px; }
.addressBox li { display: table-cell; }

这通常可以解决浮动错误。

于 2013-10-29T20:36:58.910 回答
0

在此处使用演示的完整代码

jsFiddle

html代码：

<div class="addressBox"> 
    <span>Call for a private consultation</span>
    <ul>
        <li><img src="http://images.apple.com/global/elements/flags/22x22/usa.png"> (425) 646-4700</li>
        <li><img src="http://images.apple.com/ca/global/elements/flags/22x22/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: 0 0 10px 0;
    padding:0;
    width: 100%;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
}

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

.addressBox li img {
    float: left;
    margin: 3px 7px 0 0;
    display:block;
}
于 2013-10-30T06:04:15.837 回答
0

不是 100% 确定为什么，但添加下面的代码通过确保元素不会变得太小而不适合内容来解决问题 - 这会导致文本换行。我确保将其添加到条件样式中，这样它就不会'没有任何其他不良影响。

.addressbox li {
width:133px;
}
于 2013-10-31T04:59:33.790 回答