IE7中的浮動元素

我花了大部分時間浪費了我的時間，這要歸功於IE7對「浮動」的蹩腳處理。如何使用float顯示兩列布局？IE7中的浮動元素

我想實現：

enter image description here

這是我的HTML。

<div class="holder"> 
       <div class="footer-float-content"> 
        <p class="footer-regional-title">AMERICAS</p> 
          <ul> 
           <li><a href="#">EN/United States</a></li> 
           <li><a href="#">PT/Brazil</a></li> 
          </ul> 
          <p class="footer-regional-title">APAC</p> 
          <ul> 
           <li><a href="#">日本語/日本</a></li> 
           <li><a href="#">中文/中人民共和國</a></li> 
           <li><a href="#">EN/Hong Kong</a></li> 
           <li><a href="#">EN/Singapore</a></li> 
           <li><a href="#">EN/Australia &amp; NZ</a></li> 
           <li><a href="#">ภาษาไทย/ประเทศไทย</a></li> 
          </ul> 
        </div> 
        <div class="footer-float-content"> 
          <p class="footer-regional-title">EMEA</p> 
          <ul> 
           <li><a href="#">EN/United Kingdom</a></li> 
           <li><a href="#">FR/France</a></li> 
           <li><a href="#">NL/Nederland</a></li> 
           <li><a href="#">ES/España</a></li>   
           <li><a href="#">DE/Deutschland</a></li> 
           <li><a href="#">EN/India</a></li> 
           <li><a href="#">RU/Россия</a></li>  
           <li><a href="#">EN/FR/ NL Belgium</a></li>  
          </ul> 
         </div> 
        </div>

所以我打算爲兩列布局，正如你所看到的。

我的CSS如下：

div.footer-float-content 
{ 
float: left; 
width: 155px; 
display: inline; 
padding-left: 20px; 

} 
.region-block .regions-list ul{ 

width:155px; 

display: inline; 
list-style:none; 
font-size:13px; 
line-height:16px; 
} 

p.footer-regional-title 
{ 
display: inline; 
padding-left: 17px; 
font-weight: bold; 
font-weight: 10pt; 
text-transform: uppercase; 
margin: 0; 
width: 155px; 
}

來源

2013-03-27 Barney

是什麼的頁面看起來像IE7？斜線，請問您能設置一個jsFiddle嗎？ – 2013-03-27 17:39:42

確保容器類（holder）的寬度至少爲310px，以便ie7能夠順利進行。 – Riskbreaker 2013-03-27 17:40:55

它可能只是我，但我通過jsFiddle在IE7模式下運行它，它看起來很好。 – 2013-03-27 17:49:53

HTML：

<div class="holder"> 
       <div class="footer-float-content"> 
        <p class="footer-regional-title">AMERICAS</p> 
          <ul> 
           <li><a href="#">EN/United States</a></li> 
           <li><a href="#">PT/Brazil</a></li> 
          </ul> 
          <p class="footer-regional-title">APAC</p> 
          <ul> 
           <li><a href="#">日本語/日本</a></li> 
           <li><a href="#">中文/中人民共和國</a></li> 
           <li><a href="#">EN/Hong Kong</a></li> 
           <li><a href="#">EN/Singapore</a></li> 
           <li><a href="#">EN/Australia &amp; NZ</a></li> 
           <li><a href="#">ภาษาไทย/ประเทศไทย</a></li> 
          </ul> 
        </div> 
        <div class="footer-float-content"> 
          <p class="footer-regional-title">EMEA</p> 
          <ul> 
           <li><a href="#">EN/United Kingdom</a></li> 
           <li><a href="#">FR/France</a></li> 
           <li><a href="#">NL/Nederland</a></li> 
           <li><a href="#">ES/España</a></li>   
           <li><a href="#">DE/Deutschland</a></li> 
           <li><a href="#">EN/India</a></li> 
           <li><a href="#">RU/Россия</a></li>  
           <li><a href="#">EN/FR/ NL Belgium</a></li>  
          </ul> 
         </div> 
    <div class="clr"></div> 
        </div>

CSS：

.clr{ clear:both;} 
.holder{ padding:0px 20px;} 

.holder div:first-child{ float:left;} 

div.footer-float-content{ float: right; width: 155px; } 

div.footer-float-content ul{ padding:0px; list-style:none;} 
div.footer-float-content ul li a{ text-decoration:none; color:#A5CDEB;} 
div.footer-float-content ul li a:hover{ color:#6B8596;} 

.region-block .regions-list ul{ width:155px; display: inline; list-style:none; font-size:13px; line-height:16px; } 

p.footer-regional-title{ font-weight: bold; font-weight: 10pt; text-transform: uppercase; margin: 0;}

來源

2013-03-27 19:51:39 Hassaan

IE7中的浮動元素

回答

相關問題