【CSS笔记之五】IE6/IE7/IE8下float:right的异常及其解决方法

示例分析代码：

		

			
			
安卓首页>安卓游戏> 角色育成 下载量排序时间排序
			
		

对应CSS样式代码：

#channel_tit h1,#channel_tit h2{
	background:none;
	font-size:14px;
	padding-left:10px;
	height:34px;
	line-height:34px;
	width:650px;
}
/*排序开始 20120503*/
#channel_tit h2 span{
	position:relative;
	font-weight:300;
	float:right;

}
#channel_tit h2 span a{
	padding-right:20px;
	padding-left:10px;
	position:relative;
	z-index:2;
	float:left;
}
#channel_tit h2 span b{
	background-image:url('../images/bg_icon.png');
	background-repeat:no-repeat;
	overflow:hidden;
	position:absolute;
	right:2px;
	top:10px;
	display:block;
	width:14px;
	height:14px;
	z-index:1;
}

#channel_tit span.up b{
	background-position:-9px -8px;
}
#channel_tit span.down b{
	background-position:-37px -8px;
}
/*排序结束*/

我们要实现的是如图所示的显示效果，这里需要让排序部分显示在右侧，但是这段代码在IE6、IE7、IE8下面都会换行，显示在第二行，并不是我们想要看到的效果。

相信很多人在使用float:right;的时候都遇到过向右浮动不好使的情况，比如，对于类似这段html代码：

小标题更多>>

，对a设置向右浮动，在IE下会跑到第二行显示。

这里结合自己的经验，给出三种解决方法：

1、最简单的方法就是调换顺序，将需要右浮动的元素写在前面。写成这样：

更多>>小标题

。但是我们觉得这样排列顺序的写法有违背html文档语义化的嫌疑，因此，不建议大量使用这种写法。

上述实例代码改为如下顺序，IE下避免了换行，得到正确的排版效果。

		

			
			
下载量排序时间排序安卓首页>安卓游戏> 角色育成 
			
		

2、父标签使用相对定位，子元素使用绝对定位。由于IE里元素右浮动会影响到它的兄弟元素，所以为了避开有浮动，可以采用position定位，达到同样的显示效果。代码这里从略。

3.浮动一左一右，元素块清晰区分开。

小标题更多>>

这里对 h2 span{float:left;} 对h2 a{float:right;}。如果是新闻列表

新闻标题一 2012-05-03

则css可以定义为ul li a{float:left;}，ul li span{float:right;}。

上述方法运用在示例代码中，生效，即为：

	

		安卓首页>安卓游戏> 角色育成 
		下载量排序
		时间排序
	

样式定义增加对em的定义：

#channel_tit h2 em{
	float:left;
}
#channel_tit h2 span{
	position:relative;
	font-weight:300;
	float:right;
}

补充：此处功能为列表页排序，排序规则上升与下降icon的切换使用jquery实现方式：

但是由于jquery的默认行为，在执行js的同事，阻止了页面url的跳转，因此应该对a添加click事件，代码改为：

但是由于点击后页面跳转到新的排序结果页面，排序按钮又显示成默认的样式，这就需要后台根据用户行为判别添加当前排序样式类up或者down。

或者令该排序按钮的样式固定为down，只执行单向排序显示，如果这样就不再需要这段js了。

当然了，这时，为了增强用户体验，让用户点击选中的排序方式区别去其他，可以定义一个选中类，来突出显示当前选中的排序方式。

#channel_tit h2 span.order a,#channel_tit h2 span a:hover{
    color:#f22;
    font-weight:500;
}

为当前span添加order样式的效果图：