div+css网页适应不同分辨率技巧
在ie6里，带默认下滑条，用div布局效果。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>sdf</title></head><script>function $(uid){return document.getElementById(uid);}function lod(){var b_w=document.documentElement.clientWidth;$('left').style.width=parseInt(b_w/2)+'px'$('right').style.width=parseInt(b_w/2)+'px'}</script><body ><style>*{margin:0px; padding:0px;}div{height:300px;}#left{float:left; background-color:#FF0000;}#right{float:left; background-color:#0000FF;}</style><div id="left"></div><div id="right"></div><p>在ie6里 带默认下滑条 用div布局效果</p></body></html>
去掉下滑条的情况下，使两列各占50%。缺点是，内容不能超长，适合软件布局使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{margin:0px; padding:0px;}div{height:300px;}.left{width:50%; float:left; background-color:#FF0000;}.right{width:50%; float:left; background-color:#0000FF;}</style></head><body scroll="no"><div class="left"></div><div class="right"></div></body></html>
在ie6中有下滑条的情况下布局，毛病在于左右两列的宽度不是绝对相等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{margin:0px; padding:0px;}div{height:300px;}.left{width:50%; float:left; background-color:#FF0000;}.right{width:50%; float:left; background-color:#0000FF;margin-right:-20px;}</style></head><div class="left"></div><div class="right"></div></body></html>
页:
[1]