無序列表的css問題（像往常一樣使用IE）

我使用無序列表嵌套一些div來在屏幕上顯示所需的輸出。我使用CSS來設計它們，並且它們在Chrome和Firefox上看起來很完美。但在IE（8）中，它看起來有一個我無法找到的問題。無序列表的css問題（像往常一樣使用IE）

我使用下面的CSS

<style type="text/css"> 
     .ur_container {width:980px; padding: 0; margin: 0;} 
     .ur_container ul.bx_grp {list-style-type: none; padding: 0px; margin: 0px; } 
     .ur_container ul.bx_lnx {list-style-type: none; padding: 5px; margin: 0px; } 

     .bx_grp {border:1px solid #c5c5c5; background-color: yellow; margin:0; padding:0;} 
     .bx_grp_header {background-color: #d6d6d6; border-bottom:1px solid #acacac;} 
     .bx_grp_title {float: left; font: bold 11px Arial; padding:5px;} 
     .bx_grp_options {float: right; font: 10px Arial; padding: 5px;} 
     .bx_grp_options a{color: #125B93; text-decoration: none; }   

     .bx_lnx {padding:0px; background-color: red;} 
     .bx_lnx_header {font:11px Arial; color:#333;} 
     .bx_lnx_title {float: left;} 
     .bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; } 
     .bx_lnx_options {float: right;} 
     .bx_lnx_options a {color: #258CF4; text-decoration: none;} 
     .bx_lnx_url {font: 9px Arial; color: #999; margin-top: 4px; } 
     .bx_lnx_notes {} 
     .bx_lnx_notes span {background-color: #FDFFCC; color: #666; font: 9px Arial; padding:2px;} 
     .bx_lnx_tags {} 
     .bx_lnx_tags span {background-color: #efefef; border-bottom: 1px solid #ccc; color: #666; font: 9px Arial; padding: 1px 2px 1px 2px; margin-right: 5px;} 
    </style>

針對以下HTML

<div class="ur_container"> 
    <ul class="bx_grp" id="grp_1"> 
     <li> 
      <div class="bx_grp_header"> 
       <span class="bx_grp_title">Personal File</span> 
       <span class="bx_grp_options"><a href="#">rename</a> &bull; <a href="#">make private</a> &bull; <a href="#">hide</a href="#"> &bull; <a href="#">delete</a></span> 
       <div style="clear: both;"></div> 
      </div>  
     </li> 
     <li> 
      <ul class="bx_lnx" id="lnx_1"> 
       <li> 
        <div class="bx_lnx_header"> 
         <span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span> 
         <span class="bx_lnx_options"><a href="#">edit</a> &bull; <a href="#">move</a> &bull; <a href="#">delete</a></span> 
        </div> 
       </li> 
       <li class="bx_lnx_url">http://www.google.com</li> 
       <li class="bx_lnx_notes"><span>search google for this</span></li> 
       <li class="bx_lnx_tags"><span>personal</span><span>file</span><span>google</span></li> 
      </ul>  
     </li> 
    </ul> 
</div>

將會產生在Chrome輸出和煙花 alt text http://haberhavadis.com/chff.jpg

及以下的IE alt text http://haberhavadis.com/IE.jpg

使用黃色和紅色來表明出現問題。黃色的部分是不受歡迎的。

任何人都可以指出我正確的方向嗎？

問候

來源

2010-05-12 Kemal Emin

您使用的是什麼文檔類型？ – 2010-05-12 18:45:39

實際上我沒有使用任何文檔類型。這會是一個問題嗎？ – 2010-05-12 19:17:59

沒有文檔類型通常會導致IE <= 7以怪癖模式呈現，我不確定IE 8選擇如何執行沒有有效的文檔類型。 – 2010-05-13 09:22:56

~~這看起來像IE8渲染在IE7文檔模式，它可以引發多種方式。~~

（更新後OP評論正在使用沒有DOCTYPE。）

省略DOCTYPE會導致你的頁面中怪癖模式呈現。請參閱What happens in Quirks Mode?您當然可以自由地做到這一點，但此答案將基於添加DOCTYPE，因此頁面將在標準模式下呈現。如果你想要走這條路，你可以自己決定（見Choosing the right doctype for your HTML documents。）

我會建議使用HTML 4.01嚴格...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

...甚至HTML 5 ...

<!DOCTYPE html>

...和使用validator來捕捉任何標記錯誤。

現在，我們在標準模式渲染，我們可以使用W3C box model元素在其中的width是包容的border，並且padding，而不是margin。

要標準模式本身並照顧你看到在IE8的差距，但你仍然會看到它在IE7（即使在標準模式 - 這是一個瀏覽器的bug）。由於您使用的是固定寬度（並且假設 ~~您正在以標準模式~~ 進行渲染，因此您使用標準模式路徑），但一個簡單的修復方法是...

#lnx_1 {width: 968px;}

的968px寬度來自980px（的.ur_container寬度）- 2px的（邊界1px的從.bx_grp每側）- 10px的（從.ur_container ul.bx_lnx每側5像素填充）= 968px。

請參閱this page瞭解有關此特定IE列表項錯誤修復的更多信息。

要標準模式時的另一個變化是必需的：

.bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }

的color: fff部分是沒有井號無效;將其更改爲color: #fff

至於<span class="bx_lnx_options">比您想要的低一行，更改爲標準模式將使其保持在IE8的第一行，而不是在IE7中。更改源順序會解決這個...

<span class="bx_lnx_options"><a href="#">edit</a> &bull; <a href="#">move</a> &bull; <a href="#">delete</a></span> 
<span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span>

見this answer，深入瞭解爲什麼發生這種情況。

來源

2010-05-12 18:43:36

謝謝，這個問題已經解決了一些問題。 1）頂部的間隙被刪除，但現在右側有一點空隙。單獨留下，浮動在右邊的仍然看起來應該在一行以下（參見chorme和firefox圖像，它位於紅色框的右上角）任何想法？ 2）你是如何計算「968px」的？ 3）我訪問了你建議的鏈接，但這是一個更簡單的佈局。在我的情況下，它更復雜，無論我嘗試在IE中混亂佈局，而在其他人中糾正它，反之亦然... – 2010-05-12 19:24:11

@Emin更新我的答案迴應你的問題和你提出的關於不使用DOCTYPE – 2010-05-13 13:25:11

爲了解決我的問題，我真的很欣賞你爲此付出的時間和精力。現在一切正常，我現在知道更多的文檔類型和其他問題。我希望有一天我也能成爲專家，幫助他人（作爲回報！）再次感謝！ @ ricebowl。也謝謝你回答。我不知道DOCTYPE有多重要（或必要）！ – 2010-05-14 08:37:34

無序列表的css問題（像往常一樣使用IE）

回答

相關問題