Html列表在IE7,8,9瀏覽器搞亂

我爲希伯來語客戶端創建了一個站點。下面是現場演示鏈接：Html列表在IE7,8,9瀏覽器搞亂

頂行的鏈接「關於我們」，「聯繫人」，「註冊」，「登錄」無法正常顯示的任何ie瀏覽器。圖標應顯示在文本的右側。我嘗試了不同的浮動和邊距，填充，但它只是把事情搞砸了。

如何更正此代碼？

<div class="logobar"> 
    <div class="logobar_content"> 
     <a href="#" class="logo"></a> 
     <ul class="toplinks"> 
      <li><a href="#" class="info_icon">About Us</a></li> 
      <li><a href="#" class="envelope_icon">Contact</a></li> 
      <li><a href="#" class="pen_icon">Register</a></li> 
      <li><a href="#" class="lock_icon">Log In</a></li> 
     </ul> 

     <div class="left"> 
      <p class="scart"> 
       <span>0</span>items<a href="#">Checkout</a> 
      </p> 

      <form action="post" class="search_form"> 
       <input type="text" id="search" class="search" /> 
       <input type="submit" id="submit" class="submit" value="" />      
      </form> 
     </div> 
    </div> 
</div> 




    /*=========== LOGO BAR =========*/ 
.logobar { 
    height: 95px; 
    overflow: hidden; 
    position: relative; 
    margin: 0 auto; 
    width: 100%; 
    background: #f0f0f0 url(../images/logobar_repeat.png) 0 0 repeat-x; 
} 


.logobar_content { 
    width: 960px; 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
} 


.logo { 
    background: url(../images/logo.png) 0 0 no-repeat; 
    position: relative; 
    float: right; 
    width: 312px; 
    height: 71px; 
    margin-top: 13px; 
} 


ul.toplinks { 
    float: left; 
    width: 500px; 
    margin-top: 15px; 
} 

.toplinks li { 
    float: right; 
    list-style: none; 
    border-left: 1px solid #888; 
    padding: 0 13px 0 20px; 
} 

.toplinks li a { 
    padding: 0 0 0 35px; 
    font-family: Trebuchet MS, Arial, sans-serif; 
    font-size: 12px; 
    text-transform: uppercase; 
    color: #444; 
    text-decoration: none; 
    text-align: right; 
} 

.toplinks li a.info_icon, .toplinks li a.envelope_icon, .toplinks li a.pen_icon, .toplinks li a.lock_icon { 
    background: url(../images/info_icon.png) 0px 0 no-repeat; 
    width: 18px; 
    height: 15px; 
} 

.toplinks li a.envelope_icon { 
    background: url(../images/envelope_icon.png) 0 0 no-repeat; 
} 

.toplinks li a.pen_icon { 
    background: url(../images/pen_icon.png) 0 0 no-repeat; 
} 

.toplinks li a.lock_icon { 
    background: url(../images/lock_icon.png) 0 0 no-repeat; 
} 




.scart { 
    background: #eee url(../images/basket2.png) 95% 2px no-repeat; 
    float: right; 
    height: 25px; 
    margin: 17px 0px 0 25px; 
    padding: 3px 40px 0px 10px; 
    border: 1px solid #ccc; 
} 

.scart a { 
    float: right; 
    color: #ff720c; 
    font-weight: bold; 
    font-size: 14px; 
    margin-left: 5px; 
} 

.scart span { 
    margin-left: 4px; 
} 


.search_form { 
    float: left; 
    clear: left; 
    height: 26px; 
    margin-top: 20px; 
    background: url(../images/search_left2.png) 100% 0 no-repeat; 
} 

.search { 
    background: url(../images/search_repeat.jpg) 0 0 repeat-x; 
    border: none; 
    margin: 0 11px 0 0px; 
    float: right; 
    width: 170px; 
    height: 26px; 
} 

.submit { 
    background: url(../images/search_right2.png) 0 0 no-repeat; 
    width: 35px; 
    height: 26px; 
    float: left; 
    border: none; 
}

謝謝。

來源

2012-12-15 Ray Gun

你可以分享你的代碼（HTML和CSS） – underscore

的圖標應該顯示在文本的權利。這是什麼意思，我們可以看到文字左邊的圖標 – underscore

什麼版本的IE？它在我看來是一樣的。（IE8） – bobthyasian

它是如此簡單的完成，請參閱下面的CSS規則，並根據您的需要進行更改。

.toplinks li a.lock_icon { 
    background: url("../images/lock_icon.png") no-repeat scroll 95% 0 transparent; 
} 

.toplinks li a { 
    color: #444444; 
    font-family: Trebuchet MS,Arial,sans-serif; 
    font-size: 12px; 
    padding: 0 35px 0 0; // See the css padding i changed to right 
    text-align: right; 
    text-decoration: none; 
    text-transform: uppercase; 
}

enter image description here

來源

2012-12-15 10:45:20 w3uiguru

Html列表在IE7,8,9瀏覽器搞亂

回答

相關問題