bre*_*ine 6 css semantic-markup
我的老板要我停止使用CSS布局并开始使用表格布局.其中一个主要因素是表格在水平定位的流体布局中的理想行为.看这个例子:
如果您将HTML面板的宽度滑动得更窄,您将看到该表(第一个)具有以下几个方便的特性:
示例A没有质量1.(如果内容大小发生变化,您必须手动更新比率.)
例B没有质量1或3.(静态50%不太理想,但可以工作.但是,当桌子仍然只有2行高时它会断开3行.)
示例C没有质量2或4.(我可以看到用这个假冒质量2的方法,但是清理到下一行完全是一个交易破坏者.)
示例D没有质量1或4.(从技术上讲,它有1,但两者之间的巨大差距是不实际的.另外,在同一行上左/右浮动在某些浏览器中不能正常工作.)
由于数据不是语义表格,我真的想避免使用表格.但是我的老板付钱给我,所以我需要按照他的说法去寻找更好的解决方案.有没有办法使用语义标记和CSS来做到这一点？
更新:对于所有浏览器> 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 */