您的位置：首页 > 其它

chrome vs IE:谨慎使用float属性

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

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

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

<body>
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<!-- end for container-->
</div>
</body>


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

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:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航