本文总共有 12 条评论，现在显示最新的 5 条。评分：- llllllllllllllllllll + 评分人数: 6 ,平均分: 4.67
diyism Publish at 2006-10-28 14:54:35
//table有显示效率的问题, div无法控制换行的问题, float有跳到下一行的问题, absolute又容易重叠,
//有办法兼容愚蠢的W3C(实际名称3WC)和愚蠢的微软而实现人类传统的从左到右从上到下的布局方法吗?这就是:
//传统SPAN大法终极解决方案(兼容firefox):
//不要用display:table-cell;取代display:-moz-inline-box;有水平对不齐的问题
//不要去掉vertical-align:middle;因默认的baseline被ie理解为底线却被firefox理解为顶线
//span下的overflow不能去掉(虽然span:inline-box下的overflow是无效的), 否则在firefox下访问含有该段代码的php页面时会出现无规律的盒子丢失现象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:hidden;cursor:default;}</style>
<span><div style="width:700px;border:blue 1px solid;">
<span><div style="width:200px;height:18px;border:red 1px solid;">aSame appearance in ie and firefox</div></span>
<span><div style="width:200px;height:28px;border:red 1px solid;">ie and firefox</div></span><br>
<span><div style="width:150px;height:18px;border:red 1px solid;">ie and firefox</div></span>
</div></span>
为了省事, 在firefox下插入div来crack以及调整firefox下span:inline-box的宽度的工作可以交由js来做:
<script>
if(document.addEventListener)
{document.addEventListener('DOMContentLoaded', ib_fix, false);
}
function ib_fix()
{var spans=document.getElementsByTagName('span');
for (i=0;i<spans.length;++i)
{var eleDiv = document.createElement('div');
eleDiv.innerHTML = spans[i].innerHTML;
eleDiv.style.width = spans[i].style.width;
spans[i].innerHTML = '';
spans[i].appendChild(eleDiv);
}
for (i=0;i<spans.length;++i)
{if (spans[i].style.overflow!='visible')
{spans[i].style.width=spans[i].offsetWidth+
Number(spans[i].style.borderLeftWidth.slice(0,-2))+
Number(spans[i].style.borderRightWidth.slice(0,-2))+
Number(spans[i].style.paddingLeft.slice(0,-2))+
Number(spans[i].style.paddingRight.slice(0,-2))+
'px';
spans[i].style.height=spans[i].offsetHeight+
Number(spans[i].style.borderTopWidth.slice(0,-2))+
Number(spans[i].style.borderBottomWidth.slice(0,-2))+
Number(spans[i].style.paddingTop.slice(0,-2))+
Number(spans[i].style.paddingBottom.slice(0,-2))+
'px';
}
}
}
</script>
dext Publish at 2006-8-12 8:50:16
说的不错，支持！
adam0eve Publish at 2005-12-13 15:51:37 评分5
good!
这才是WEB标准所在传送的
kisshand Publish at 2005-8-3 17:12:15 评分5
说的好,我听重构很久了,基本上我以前做的都符合html4.01标准.
同样,我觉的TABLE有的他的好处.
wskydmtd Publish at 2005-3-24 15:59:28 评分5
呵，说得不错啊~~~虽然我不是很懂~~
查看全部评论 |
![[FENGYUAN]](http://case.blueidea.cn/files/2007/08/20/work_246113_1359_20070820_015554_4600220_t.jpg)
