Javascript解決方法顯示：IE <= 7中的table-cell

Question

社區最近提供了一些很棒的工具，可以讓早期版本的IE做他們從未打算過的事情。 像多列css選擇器一樣。 不幸的是我無法找到一個java腳本，我可以在IE lte 7中有條件地加載轉換使用display：table-cell的多列布局。

有誰知道這樣的劇本？

<div id="sidebar">
   <ul id="main_nav">
      <li><a href="about_us.php">ABOUT US</a></li>
   </ul>
</div> <!--end of sidebar-->

<div id="content">
   <div id="main_content">
     <h1>Header</h1>
     <p>Page Content</p>
   </div> <!--end of main_content-->

   <div class="aside_info">
      <h2>Side Info</h2>         
   </div>
</div> <!--end of content-->

共有3列#side_bar和#content是列，在#content中有#main_content和#aside_info。 這非常適合在具有#aside_info div的頁面上創建3列布局，但在其他方面是兩列。

如果有人知道一個腳本將其轉換為后台瀏覽器的表我會很感激。

謝謝，

丹尼爾

Answer 1

使用jQuery非常簡單：

$('<table><tr><td></td><td></td><td></td></tr></table>')
    .find('td')
        .eq(0)
            .append( $('#sidebar') )
            .end()
        .eq(1)
            .append( $('#main_content') )
            .end()
        .eq(2)
            .append( $('.aside_info') )
            .end()
        .end()
    .appendTo( $('#content') );

希望這可以幫助！

Answer 2

我找到了解決這個問題的方法，當我回來時，我看到jimbojw已經把更優雅的解決方案組合在了一起。 我投票支持他，因為它的簡單性非常吸引人（請注意自己： 了解更多jQuery ！）。 但是，我在這里發布我的解決方案，如果你不能使用jQuery，不知道如何測試IE7，或者由於某些其他原因需要一個不同的解決方案：

<div id="sidebar">
   <ul id="main_nav">
      <li><a href="about_us.php">ABOUT US</a></li>
   </ul>
</div> <!--end of sidebar-->

<div id="content">
   <div id="main_content">
     <h1>Header</h1>
     <p>Page Content</p>
   </div> <!--end of main_content-->

   <div class="aside_info">
      <h2>Side Info</h2>         
   </div>
</div> <!--end of content-->

<script type="text/javascript">
    // Test for IE version
    var ieversion = 0;
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ // IE test adapted from http://www.javascriptkit.com/javatutors/navigator.shtml
        ieversion = new Number(RegExp.$1)
    }   

    if(ieversion > 0 && ieversion < 8)
    {
        // Find the existing DIV elements
        var sidebarDiv = document.getElementById("sidebar");
        var mainContentDiv = document.getElementById("main_content");
        var contentDiv = document.getElementById("content");

        // Create the structure of the table that will replace them
        var tableElement = document.createElement("table");
        var tbodyElement = document.createElement("tbody");
        var trElement = document.createElement("tr");
        var sidebarTd = document.createElement("td");
        sidebarTd.id = "sidebar";
        var mainContentTd = document.createElement("td");
        mainContentTd.id = "main_content";
        var asideInfoTd = document.createElement("td");

        // Clone the DIVs' child nodes and add the clones to the appropriate TDs. Then add the TDs to the TR.
        for(var i=0;i<sidebarDiv.childNodes.length;i++)
        {
            sidebarTd.appendChild(sidebarDiv.childNodes[i].cloneNode(true));
        }
        trElement.appendChild(sidebarTd);

        for(var i=0;i<mainContentDiv.childNodes.length;i++)
        {
            mainContentTd.appendChild(mainContentDiv.childNodes[i].cloneNode(true));
        }
        trElement.appendChild(mainContentTd);
        mainContentDiv.parentNode.removeChild(mainContentDiv);

        var contentChildDivs = contentDiv.getElementsByTagName("div");
        for(var i=0;i<contentChildDivs.length;i++)
        {
            if(contentChildDivs[i].className.indexOf("aside_info") > -1)
            {
                asideInfoTd.appendChild(contentChildDivs[i].cloneNode(true));
            }
        }
        // We only add the aside info if there were some (sometimes there aren't)
        if(asideInfoTd.childNodes.length > 0)
        {
            trElement.appendChild(asideInfoTd);
        }

        // Finish putting the table together
        tbodyElement.appendChild(trElement);
        tableElement.appendChild(tbodyElement);

        // Remove the existing content div and then replace the sidebar with the new table that contains all 2 or 3 columns.
        contentDiv.parentNode.removeChild(contentDiv);
        sidebarDiv.parentNode.replaceChild(tableElement, sidebarDiv);
    }
</script>