chrome vs IE:谨慎使用float属性

来源：互联网发布：乐高机器人 c编程编辑：程序博客网时间：2024/05/24 15:37

在页面布局这块，目前流行的做法是div+css。用div把页面分成几块，然后用css来控制这几块在页面上的排列，从而达到我们的块状布局。我这里并不准备做一个正式的网页，只是想说一下自己在布局时遇到的一些趣事。

1.准备一个简单的html页面

这个页面只有几个div,没有任何的文字内容。代码如下：

当然这只是第一步，如果在浏览器器里显示，我保证你看不到任何东西。

2。让页面变的块起来

下面显示的是我想达到的页面效果，不同的块用了不同的颜色标注，每个块的边框也进行加粗。

3. chrome vs IE：第一回合

css代码如下:

<mce:style type="text/css"><!--body{ width:930px;; margin: 0px auto 0px auto;} #header{ border-width: 1px; border-style:solid; height:50px; display:block; background-color:black; } #container{ border-width: 1px; border-style:solid; display:block; background-color:green; } #left{ width:200px; margin-left:5px; display:block; float:left; border-width: 1px; border-style:solid; height:100px; background-color:red; } #right{ margin-right:5px; width:700px; display:block; border-width: 1px; border-style:solid; height:200px; background-color:white; }

chrome:

IE:

4.第二回合

下面的css代码是以第3步中的为基准，只给出改动部分。

#container{ border-width: 1px; border-style:solid; display:block; overflow:hidden; background-color:green; } #right{ margin-right:5px; width:700px; display:block; float:left; border-width: 1px; border-style:solid; height:200px; background-color:white; }

chrome:

IE: