更新: すべてのブラウザ > ie7 で使用できますdisplay: table, table-row, table-cell。jQuery コードは ie7 を対象とし、div を適切なテーブル要素に置き換えます。
これがこれまでに遭遇した唯一の問題である場合、これを修正するためだけに間抜けなグリッド システムをインストールするべきではありません。それはやり過ぎであり、時間の無駄です。
http://jsfiddle.net/CoryDanielson/yuNTX/
サンプルhtml
<div class="table width100pct"> <!-- .table should have NO style. just 'display: table' -->
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
<!-- class="table, tr, td" is ONLY for changing display: table, table-row and table-cell.
you SHOULD NOT include any styles inside of these CSS selectors. These classes will
be removed when the divs are transformed into <table>, <tr>, <td>
-->
//conditionally load the javascript patches for ie7
<!--[if IE 7]><script src="/js/IE7fixes.js"></script><![endif]-->
IE7fixes.js
$(document).ready(function(){
//comment out the if statement to check functionality without ie7
if ($.browser.msie && $.browser.version == 7) {
$('html').addClass('ie7') //<html class="ie7">.. like modernizr
var elem, elemClass
$('div.table').each(function(i, elem) {
elem = $(elem)
elemClass = elem.removeClass('table').attr('class') || ''
elem.wrapInner("<table class='" + elemClass + "' />").children().unwrap()
})
$('div.tr').each(function(i, elem) {
elem = $(elem)
elemClass = elem.removeClass('tr').attr('class') || ''
elem.wrapInner("<tr class='" + elemClass + "' />").children().unwrap()
})
$('div.td').each(function(i, elem) {
elem = $(elem)
elemClass = elem.removeClass('td').attr('class') || ''
elem.wrapInner("<td class='" + elemClass + "' />").children().unwrap()
})
}
});
私のようにCSSを構成する必要があります
必須のCSS
table, div.table { width: 100%; }
tr, div.tr { vertical-align: top; }
/* the following 3 classes will be dropped when transformed in ie7
but that won't matter because they'll fall back to <table><td><tr>
*/
div.table { display: table; } /* NO STYLES HERE */
div.tr { display: table-row; } /* NO STYLES HERE */
div.td { display: table-cell; } /* NO STYLES HERE */