网页缩小放大后错位的解决方法(IE6有待解决)

今天在网上看文章的时候突然看到了这(http://www.itlead.com.cn/article/html/148/2011-08-03/content-1279.shtml),因为我自己做网页的时候也存在这个问题 缩小的时候浮动的div会出现错位。按照作者的方法试了下,确实是能解决错位问题,可惜在IE6下,这种方法是不可取的。IE6下2个div都要浮动才会在一直线。

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>


用户通过鼠标滚轮放大或者缩小页面的时候页面的布局不乱或者不发生floatdrop呢

产生原因:

  1. 小心使用边框,边框在一些浏览器里缩小时的最小宽度是 1px,不会随着缩放比例变化,会导致 floatdrop。
  2. 覆盖掉 Chrome 的字体最小尺寸,Chrome 下字体大小到最小尺寸后不再缩小,会造成布局变乱。

你可能感兴趣的:(网页缩小放大后错位的解决方法(IE6有待解决))