網頁縮小放大後錯位的解決方法（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>