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

时间 2019-11-26

标签网页缩小放大错位解决方法 ie6 有待栏目 HTML 繁體版

原文原文链接

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

一、由于宽度缘由。浏览器

二、浮动缘由(我就是这个问题) 布局

我是一个大DIV（固定宽度的）里面有两个小DIV（也是固定宽度的）一个左边一个右边。我也不知道为何会错位，我就试着改样式。字体

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

<!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呢

产生缘由：

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