javascript - 将 div 标签更改为 IE7 的表格

Question

我用 display:table; 创建了一个 Div 表。但它不工作 ie7 或 ie6 .. 我不想为此使用 display-table.htc Hack ......

我想改变

"<div class='divTable'> into <table class='divTable'>" 
"<div class='divRow ieclear'> into <tr class='divRow ieclear'>" 
"<div class='divCell'> into <td class='divCell'>"

现在，如果 browser.version == 7 ||，我正在尝试将 'Div' 转换为 'Table' browser.version == 6 ...我是Jquery的新手...：D ...

<div id="test">     
     <div class="divTable">
            <div class="divRow ieclear">
                <div class="divCell">Cell Wording1</div>
                <div class="divCell">Cell Wording2</div>
                <div class="divCell">Cell Wording3</div>
                <div class="divCell">Cell Wording4</div>
            </div>
      </div>
</div>

CSS//----

.divTable {
    font-family: Arial; 
    font-size: 12px;
    display: table;
    width: 981px;
    border: 10px soild #ECECEC;
    border-spacing: 0px;
    overflow: hidden; /* border-collapse:separate;*/}

.divRow {
    display: table-row;
    *display: block;*
    height: 100%;
    width: 981px;
}

.divCell {
    *float: left;*
    display: inline-block;
    display: table-cell;
    width: 200px;
    padding: 10px;
    border-bottom: 1px solid #E9E9E4;
    border-right: 1px solid #fff;
    background: #F5F6F0;
}

.ieclear {
    clear: both;
}

jQuery//

$(function () {
    //alert($.browser.version);
    jQuery("#test").find(".divTable").html('<table class="divTable">' + $(".divTable").html() + "</table>").html();
    //or
    $('div').replaceWith(function () {
        return $("<table />", { html: $(this).html() });
    });
});

请建议我或帮我解决这个问题... :)

Answer 1

尝试使用：

position:relative;
display: table-cell /*IE9+ and other browsers*/;
display: block /*IE8 and lower*/;