Question

我用display：table创建了一个Div表。但它不工作ie7或ie6 ..而且我不想使用display-table.htc Hack for this ...

我想更改

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

现在我正在尝试将'Div'转换为'Table'，如果browser.version == 7 || 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*/;

将div标签更改为IE7的表格

1 个答案: