不用float和position,也不用js，实现网页自适应

公告

View Post

 1 <!DOCTYPE html>
 2  
 3 <html lang="en">
 4  
 5 <head>
 6  
 7 <meta charset="utf-8">
 8  
 9 <meta name="description" content="">
10  
11 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
12  
13 <style>
14  
15         /*不用float和position,也不用js，实现网页自适应屏幕（左侧固定宽200px,右侧auto,中间距10px）*/
16  
17   *{ margin:0; padding:0;}
18  
19   .container{width:96%;margin:5px auto;}
20  
21   .main{padding-left:210px;  background:#ccc;color:#fff}
22  
23   .left,.right{display:inline-block;*zoom:1;*display:inline;  min-height:100px;_height:100px;}  
24  
25   .left{width:200px;margin-left:-210px;  background:red}
26  
27   .right{width:100%;  background:blue;}  
28  
29 </style>
30  
31 </head>
32  
33 <body>
34  
35 <div class="container">
36  
37   <div class="main">  
38  
39     <div class="left">left {width:200px;}</div>
40  
41         <div class="right">right {width:auto;}</div>
42  
43   </div>
44  
45   <h3>测试目的：不用float和position，<span style="line-height: 1.5;">也不用js</span><span style="line-height: 1.5;">，实现网页宽度自适应屏幕（左侧固定宽200px,右侧auto,中间距10px；兼容ie6）</h3>

View Code

测试目的：不用float和position，也不用js，实现网页宽度自适应屏幕（左侧固定宽200px,右侧auto,中间距10px；兼容ie6）

1、可缩小浏览器测试；

2、bug:不同浏览器，两列中间距不一样，最右侧残缺;

你用不同的浏览器看中间距不一样的
ie6 ie7正常
ie8 ie9 firefox chrome等浏览器right部分向左偏移了6px
我主要想知道导致“现代”浏览器偏移的原因？由哪一个属性引起的？为什么“古代”浏览器又显示正常（此正常是理想状态下的显示效果）？

这个问题主要是对各个浏览器对盒模型的理解，论坛里有说这个的帖子，可以参考看一下：http://www.js7e.com/forum.php?mod=viewthread&tid=964下面是最终修改后的正常代码：

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="utf-8">
 
<meta name="description" content="">
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
<style>
 
        /*不用float和position,也不用js，实现网页自适应屏幕（左侧固定宽200px,右侧auto,中间距10px）*/
 
  *{ margin:0; padding:0;}
 
  .container{width:96%;margin:5px auto;}
 
  .main{padding-left:210px;  background:#ccc;color:#fff; word-spacing:0; letter-spacing:0; font-size: 0;}
 
  .left,.right{display:inline-block;*zoom:1;*display:inline; font-size: 12px; word-spacing: normal; letter-spacing: normal; min-height:100px;_height:100px;}  
 
  .left{width:200px;margin-left:-210px;  background:red;}
 
  .right{width:100%; background:blue; margin-left:10px; *margin-left: 0;}
 
</style>
 
</head>
 
<body>
 
<div class="container">
 
  <div class="main">  
 
    <div class="left">left {width:200px;}</div>
 
    <div class="right">right {width:auto;}</div>
 
  </div>
 
</div>
 
  <h3>测试目的：不用float和position，<span style="line-height: 1.5;">也不用js</span><span style="line-height: 1.5;">，实现网页宽度自适应屏幕（左侧固定宽200px,右侧auto,中间距10px；兼容ie6）</h3>
 
</body>
 
</html>

.main{word-spacing:0; letter-spacing:0; font-size: 0;}{ font-size: 12px; word-spacing: normal; letter-spacing: normal;}

posted on 2013-11-20 15:40 chenqj 阅读(344) 评论(0) 收藏举报

刷新页面返回顶部