0

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() });
    });
});

私に提案するか、これを解決するのを手伝ってください... :)

4

1 に答える 1

0

使用してみてください：

position:relative;
display: table-cell /*IE9+ and other browsers*/;
display: block /*IE8 and lower*/;
于 2013-08-26T13:00:29.483 に答える