我继承了一个网站,该网站在 IE8 中显示时存在严重问题。看起来其中很多都与 div 相关,但我可以使用一些帮助来解决问题。
我现在正在处理的问题是电话号码和标志的 div 显示在两行,而不是一行。这最终会下推导航栏的内容。
URL:fertileweb.com/demosite(稍微过时的副本,最新的在本地托管)
IE8 View :! http://i.imgur.com/HaENEvu.jpg
IE10/firefox/chrome View :! 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;}
谢谢!
最佳答案
尝试将其添加到您的 CSS 样式中
.addresBox ul, .addresBox ul li {
white-space:nowrap;
}
问题似乎是关于浏览器大小而不是浏览器版本。
关于html - IE8 CSS float div 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19668234/