2009-05-01 53 views
2

我有一大堆名單你如何解決IE不支持的問題:之後?

<ul> 
    <li class="first">Item 1</li> 
    <li>Item 2</li> 
    <li class="last">Item 3</li> 
</ul> 

li:after { 
    content: '/'; 
} 
li.last:after { 
    content: ''; 
} 

這有可能是一種老生常談的問題的風格。我想我可以混亂的HTML,並把中介<li>的包含字符,或者我可以鉤在一個JavaScript把它們放在那裏,如果IE瀏覽器是加載瀏覽器,但不會沒有JavaScript的人趕上。 Iuno。我傾向於混亂的HTML,但我想聽聽是否有這方面的一些意見。

回答

2
  1. 使用IE7.js黑客在僞元素支持後添加。
  2. 使用條件註釋添加到標記中以模擬該效果或刪除某些現有樣式以使其更容易閱讀而不使用分隔符 - 例如,讓列表項在條件註釋中堆疊在樣式表中
  3. 允許IE6通過重新排列樣式來優雅地降級,所以這種情況不會發生,即使它在其他瀏覽器中看起來不同。
1

我只是在生成列表HTML時使用服務器端語言。我想這會被認爲是「混淆HTML」。

+1

你是否爲所有客戶做到這一點,而不用打擾css呢,還是你從它的用戶代理中精確定位IE? – xkcd150 2009-05-01 21:45:35

+0

我只是總是這樣做,:不幸的是,此時此刻並不是一個特別支持良好的選擇器。 – 2009-05-01 21:46:57

+0

:之後在2001年後發佈的瀏覽器中得到很好的支持。用戶代理不可靠,特別是在決定瀏覽器功能方面。 – Anonymous 2009-05-02 01:52:15

2

這是一個你不會喜歡的想法。 8-)將您的/符號作爲背景圖像放入<li> s的右側填充中。

+0

你是認真的嗎?D是你通常做什麼的? – xkcd150 2009-05-01 21:46:50

+0

我只在這個上下文中使用了豎線,而不是斜槓,在這種情況下,您可以使用邊界右邊(例如http://entrian.com/source-search/上的頂部導航菜單) – RichieHindle 2009-05-01 21:56:13

-1

如果IE支持最後一個孩子,你不需要做class =「last」:P。

IE的支持已經並將繼續是廢話。 IE 8已經做了大量的改進,比如:之後和之前:IE 7支持它們。只要瞄準這兩者,尤其是因爲微軟正在推動IE 8超越Windows Update。

0

我使用javascript和條件註釋。即使用jQuery。

<!--[if IE 6]> 
    <script type='text/javascript'> 
    $(document).ready(function() { 
     $('li').not('li.last').after('/'); 
    }); 
    </script> 
<![endif]--> 

這是更偏向於使用單獨的JS文件。
這也有一個缺點,就是你必須將所有東西都寫兩次,因爲你把它放在用於優秀瀏覽器的CSS中,再用JavaScript放在IE6中。

3

的Internet Explorer(IE)不支持:選擇後,我們必須使用一些黑客,而不是,比如這一個:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + 'xkcd150') : ''); } 

「xkcd150」 - 這人會在每個<li>之後添加。

其表達式,通常用於替換和修復一些IE錯誤。

因此,完整的代碼是:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '/') : ''); } 

li.last { 
scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : ''); } 

第一線增加了 「/」,第二個是用來添加什麼。

所有的代碼都必須添加到你的css文件中。

0

嘗試使用類似jQuery的東西。

`$(函數(){

$( '禮')不是( ':最後的孩子'。)追加( '\'');

});`

它不會弄亂html。 此外,爲了使這隻適用於IE,請嘗試使用jQuery兼容性。

0

如果您的內容不intented在運行時改變,你可以使用以下命令:

.icon-glass { 
    *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf000;'); 
} 

如果你的內容被設計在運行時改變,你可以做這樣的事情:

.icon-glass { 
    *top:expression(0, this.innerHTML = '&#xf000;'); 
} 

不幸的是,這是非常緩慢的。儘管IE6可能會在性能顯着下降的情況下工作,但如果頁面上的圖標太多,IE7可能會崩潰。所以我不會推薦這個第二種技術,除非你只使用很少的圖標,並且你可以承擔性能的降低。

相關問題