IE6下3px解决方法
摘要：IE6浏览器下3px解决方法:IE6下的3px问题的产生主要应该归咎于书写不规范造成的，比如我们要写一个左右两列的结构，代码如下:蚂蚁部落 以上代码中，左边的div是浮动的，第二个div非浮动的，这样的话在IE6下会产生3px问题。其实这个问题本身就是由于代码书写不标准造成的，在标准浏览器中，...
IE6浏览器下3px解决方法:
IE6下的3px问题的产生主要应该归咎于书写不规范造成的，比如我们要写一个左右两列的结构，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
width:300px;
height:300px;
background-color:red;
}
.left
{
float:left;
width:100px;
height:100px;
background-color:green;
}
.right
{
width:100px;
height:100px;
background-color:blue
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
以上代码中，左边的div是浮动的，第二个div非浮动的，这样的话在IE6下会产生3px问题。其实这个问题本身就是由于代码书写不标准造成的，在标准浏览器中，因为第一个div浮动后会脱离文档流，那么后面的div会填补这个div的位置，那么网页的显示效果就是第一个div会覆盖第二个div，这本身就不规范的写法。解决方法就是让第二个div也浮动起来。修改代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
width:300px;
height:300px;
background-color:red;
}
.left
{
float:left;
width:100px;
height:100px;
background-color:green;
}
.right
{
float:left;
width:100px;
height:100px;
background-color:blue
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢