码迷,mamicode.com
首页 > 其他好文 > 详细

为什么IE6下右浮动的对象换行了

时间:2015-07-07 16:46:28      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:

为什么IE6下右浮动的对象换行了:
当一个对象右浮动的时候,在IE6浏览器下面,它有可能会换行。
先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  width:200px;
  height:200px;
  border:1px solid red;
  overflow:hidden
}
span{
  width:50px;
  height:50px;
  border:1px solid blue;
  float:right;
}
</style>
</head>
<body>
<div> 蚂蚁部落<span>欢迎您</span> </div>
</body>
</html>

以上代码在IE6浏览器运行,右浮动的<span>元素会产生换行现象,也不能说完全换行,而是下滑了一定的尺寸。这就是IE6一个比较重要的bug,也就是当右浮动的元素前面由文本或者内联元素的时候,就会产生换行。解决方案:将右浮动的对象放到文本或者内联元素之前即可。代码修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    overflow: hidden
}
span {
    width: 50px;
    height: 50px;
    border: 1px solid blue;
    float: right;
}
</style>
</head>
<body>
<div> <span>欢迎您</span>蚂蚁部落 </div>
</body>
</html>

原文地址:http://www.51texiao.cn/div_cssjiaocheng/2015/0429/418.html

为什么IE6下右浮动的对象换行了

标签:

原文地址:http://www.cnblogs.com/softwhy/p/4627146.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!