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