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

为什么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

时间: 2024-11-13 04:22:07

为什么IE6下右浮动的对象换行了的相关文章

li元素右浮动会出现换行

li元素右浮动会出现换行:一般情况下想让块级元素在一行显示,可以为元素施加浮动,但是有时候表现却并非如人愿,会出现换行的情况.看如下代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂

css给span加float:right右浮动后内容换行下移

转自:https://www.jb51.net/css/67309.html 在div css布局中 当span标签右浮动时会产生换行狭义的现象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns= "http://www

右浮动div换行现象的原因

右浮动div换行现象的原因:当然右浮动出现div换行的原因是多种多样的,下面就介绍一个初学者比较容易出现的一个错误.代码实例: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

IE6下兼容问题(转载)

()1.终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--> <!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本. <![endif]--> <!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6). <![endif]--> <!--[if IE 5.5]> 这段文字仅显示在 IE5.5. &

IE6下span右浮动换行怎么处理

IE6下span右浮动换行怎么处理:在编写新闻列表的时候,一般要求左边是新闻标题,右边是新闻发布时间.时间一般会放在<span>标签中,并将其右浮动.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /&g

ie6/7/8中span右浮动折行问题的解决方案

浮动标准: W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释.以下是关键段落: A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is al

为什么div右浮动后还会换行

为什么div右浮动后还会换行:建议:尽可能的手写代码,可以有效的提高学习效率和深度.让两个div排列在同一行有多种方法,有些初学者可能会这样写,那就是左边的div不浮动,右边的div右浮动,以为这样就可以达到两个div在同一行的效果的,但是事实并非如此.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" c

浮动元素的兼容以及ie6下li标签的部分兼容性问题

清除浮动的方法有许多比较常用的是 .clear{zoom: 1;} .clear:after{content: "";display: block;clear: both;} after伪类元素末尾添加内容Ie6,7不兼容可以用zoom来解决(zoom缩放会触发ie下的haslayout使元素根据自身内容计算宽高但火狐不支持但可以通过after伪类解决) 两者结合解决的浏览器不兼容的问题: ie6下li标签的部分兼容性问题: 可以通过给li标签加 vertical-align: top

IE6下的bug

一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px.想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG 二.IE6中3像素问题及解决办法 当元素使用float浮动后,元素与相邻的元素之间会产生3px的间隙.诡异的是如果右侧的容器没设置高度时3px的间