IE替代列數和列差

我想知道是否有一個IE替代使用column-count和column-gap？IE替代列數和列差

我做了這個post關於創建一個列表，每五個元素自動創建一個新的列。 Leniel建議使用column-count和column-gap的解決方案，但IE不支持此功能。我正在尋找回落解決方案。

2012-09-06 Jon

我發現這個：Multi-column Layout with CSS3。閱讀標題爲的CSS3多列瀏覽器支持。它規定如下：

如果您需要支持不具備多列支持的瀏覽器，那麼你也應該有這些瀏覽器一個退而求其次的選擇。下面是如何可以更換其它任何樣式表後與Modernizr腳本做...

將以下腳本標籤在你的腦袋：

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

下方添加另一個腳本上面這行代碼如下：

<script> 
Modernizr.load({ 
    test: Modernizr.csscolumns, 
    yep: 'columns.css', 
    nope: 'no-columns.css' 
}); 
</script>

創建一個CSS樣式表tha t包含您的多列CSS並將其保存爲columns.css在同一目錄中。
創建一個包含回退CSS的CSS樣式表（例如帶有浮點的列），並將其保存爲no-columns.css在同一目錄中。在IE和Chrome，Safari或Opera中測試您的頁面。

Multiple Columns該頁面提供了一個JavaScript回退，如果你有興趣去這樣。

來源

2012-09-07 06:13:55

我不喜歡使用JavaScript來檢測Internet Explorer中，我使用條件註釋：<！ - [如果LTE IE 9]>！ '

Your html code here...

< - [如果LTE IE 9] >

' 在你的CSS，你可以選擇這樣的： '＃IE-9或防衰老#page { /*一些CSS你即*/ }' –

這個答案與問題無關... – vsync

如果你更喜歡使用jquery.columnizer.js，這裏有一個很好的Modernizer腳本片段。 https://gist.github.com/jimmynotjim/3666470 – Micah

下面是我的作品：而不是使用JS或IE瀏覽器的條件，你可以直接在你的樣式表中使用Modernizr的類。

如果你做一個我們的網頁上檢查元素，你會看到有在html標籤增加了許多CSS類：

If you do an Inspect Element on our webpage, you will see that there are many CSS classes added to the html tag

如果用戶的瀏覽器不支持CSS欄，你會看到一個可用於浮動元素的「no-csscolumns」類。

來源

2013-06-11 22:07:10

注意：您不會在瀏覽器的視圖源代碼中看到Modernizr生成的'CSS'類。如上面的屏幕截圖或其他一些DOM查看器所示，使用Firefox的Firebug ... :)看看這裏：http://stackoverflow.com/a/7835579/114029 –

這裏是解決方案如何使多列菜單看起來與創建列計數屬性相同的菜單，並在所有瀏覽器。

這與浮動元素做了，但這裏的關鍵是要重新排序在JavaScript（或服務器端）的元素，使他們自然流動看起來上下，而不是左右

項目1項目4 Item7

項目2項目5 Item8

項目3項6

例子： http://jsfiddle.net/xrd5Y/16/

// number of columns 
var columns = 4; 

var $ul = $('ul.multicolumn'), 
    $elements = $ul.children('li'), 
    breakPoint = Math.ceil($elements.length/columns); 
    $ordered = $('<div></div>'); 

function appendToUL(i) { 
    if ($ul.children().eq(i).length > 0) { 
     $ordered.append($ul.children().eq(i).clone()); 
    } 
    else $ordered.append($('<li></li>')); 
} 

function reorder($el) { 
    $el.each(function(){ 
     $item = $(this); 

     if ($item.index() >= breakPoint) return false; 

     appendToUL($item.index()); 
     for (var i = 1; i < columns; i++) { 
      appendToUL(breakPoint*i+$item.index()); 
     } 
    }); 

    $ul.html($ordered.children().css('width',100/columns+'%')); 
} 

reorder($elements);

來源

2014-04-02 09:23:03 Juri

-2

下面是簡單的解決方案，我發現了IE瀏覽器和IE瀏覽器的邊緣只是一段<p> your text </p>分隔每列，列2 <p> your text </p>，它爲我工作。

#subfootera { 
    with:100%; 
    text-align:left; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
    color: #000; 
    text-shadow:1px 1px 1px #999; 

} 

.subfooterb { 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
    -moz-column-count: 2; /* Firefox */ 
    column-count: 2; 
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */ 
    -moz-column-gap: 10px; /* Firefox */ 
    column-gap: 10px; 
} 

    <div id="subfootera"> 
    <div class="subfooterb"> 
    <p>Your Text.</p> 
    <p>Your text or an img</p> 
    </div> 
    </div>

來源

2016-03-24 07:05:30

IE替代列數和列差

回答

相關問題