Javascript用于显示的解决方法：IE <= 7中的table-cell [英] Javascript work-around for display: table-cell in IE &lt;= 7

问题描述

社区最近提供了一些奇妙的工具，使早期版本的IE做的事情，他们从来没有打算这样做。像多列css选择器。不幸的是，我没有能够找到一个java脚本，我可以有条件地加载IE IE 7转换使用display：table-cell的多列布局。

The community has provided some wonderful tools recently to make early versions of IE do things that they were never meant to do. Like multi-column css selectors. Unfortunately I have not been able to find a java-script that I can load conditionally in IE lte 7 that converts multi-column layouts that use display: table-cell.

有人知道这样的脚本吗？

Does anyone know of such a script?

<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列布局。

There are 3 columns #side_bar and #content are columns and within #content there is #main_content and #aside_info. This works great to create a 3 column layout on a page that has an #aside_info div but is two column other-wise.

如果任何人知道一个脚本会将其转换为表格的向后浏览器，我会很感激。

if anyone knows a script that will convert this to tables for backward browsers I would appreciate it.

感谢，

丹尼尔

推荐答案

使用jQuery很容易：

It's pretty easy using 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') );

希望这有助于！

这篇关于Javascript用于显示的解决方法：IE <= 7中的table-cell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！