表示用のJavaScriptの回避策：IEのテーブルセル<= 7

Question

コミュニティでは、最近、IEの初期バージョンに、決して意味を持たないことをするための素晴らしいツールを提供しています。マルチカラムCSSセレクタのように。残念ながら私はIEのlte 7で条件付きでロードできるjava-scriptを見つけられず、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--> 

列であり、#content内#main_contentと#aside_infoがある#side_barと#content 3列があります。これは、#aside_info divを持つが他の2つの列であるページに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を学んでください！）。これが答えではない

<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>