网页缩小放大后错位的解决方法
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 531
今天同事人说网页缩小放大错位了,我就看了下真的错位了!纳闷怎么会这样,我仔细的看了看(心想谁会把网页缩小放大了看),最后还是没办法说服上级,只能找方法解决了。经过仔细查看找到了问题所在。有多种原因。

今天同事人说网页缩小放大错位了,我就看了下真的错位了!纳闷怎么会这样,我仔细的看了看(心想谁会把网页缩小放大了看),最后还是没办法说服上级,只能找方法解决了。经过仔细查看找到了问题所在。

有多种原因。

1、因为宽度原因。

2、浮动原因(我就是这个问题)

我是一个大DIV(固定宽度的)里面有两个小DIV(也是固定宽度的)一个左边一个右边。我也不知道为什么会错位,我就试着改样式。

左边宽度不变,右边我把宽度去掉了,并且去掉了浮动。加个margin-left:左边的宽度。然后就正常了。

<!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=gb2312" />
<title>无标题文档</title>
<style>
.clearfix:after
{ content:"."; display:block;height:0;clear:both; visibility:hidden;}
*html .clearfix
{height:1%;}
*+html .clearfix
{height:1%;}
.clearfix
{display:inline-block;}
.clearfix
{display:block;}

.com
{width:800px;padding:10px;border:1px solid #333;background:#eee;}
.left,.right
{height:100px;}
.left
{width:200px;background:#f60;float:left;display:inline;}
.right
{margin-left:200px;background:#000;}
.r_c
{width:100%;margin-right:10px;}
</style>
</head>
<body>
<div class="com clearfix">
<div class="left">adfaaaaaaaaaaaaaaa</div>
<div class="right"><div class="r_c">adfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></div>
</div>
</body>
</html>

这样就解决了网页缩小放大的问题

http://www.ok22.org/art_detail.aspx?id=199【网页缩小放大后错位的解决方法】
幸凡在线学习网 http://www.ok22.org
联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2