我继承了一个在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;}
谢谢!
答案 0 :(得分:0)
尝试在CSS样式中添加它
.addresBox ul, .addresBox ul li {
white-space:nowrap;
}
问题似乎与浏览器大小有关,而不是浏览器版本。
答案 1 :(得分:0)
如果wordwrap没有成功,我建议使用display: table;
选项,如下:
.addressBox { display: table; width: 500px; }
.addressBox li { display: table-cell; }
这通常可以解决浮动错误。
答案 2 :(得分:0)
使用此处的演示工作完整代码
<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>
.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;
}
答案 3 :(得分:0)
不是100%确定原因,但添加下面的代码通过确保元素对内容不会太小来解决问题 - 这会导致文本换行。我确保将其添加到条件样式所以它不会有任何其他不利影响。
.addressbox li {
width:133px;
}