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

示例分析代码：

		<div id="channel_tit" class="round_top">
			<span class="rtl rtl1"></span>
			<h2>安卓首页><a href="http://www.feiliu.com/android/game/list.htm">安卓游戏</a>> 角色育成 <span class="orderbydown down"><a href="javascript:void(0);" title="">下载量排序</a><b></b></span><span class="orderbytime down"><a href="#" title="">时间排序</a><b></b></span></h2>
			<span class="rtr rtr1"></span>
		</div>

对应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代码：<h2>小标题<a href=”#”>更多>></a></h2>，对a设置向右浮动，在IE下会跑到第二行显示。

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

1、最简单的方法就是调换顺序，将需要右浮动的元素写在前面。写成这样：<h2><a href=”#”>更多>></a>小标题</h2> 。但是我们觉得这样排列顺序的写法有违背html文档语义化的嫌疑，因此，不建议大量使用这种写法。

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

		<div id="channel_tit" class="round_top">
			<span class="rtl rtl1"></span>
			<h2><span class="orderbydown down"><a href="javascript:void(0);" title="">下载量排序</a><b></b></span><span class="orderbytime down"><a href="#" title="">时间排序</a><b></b></span>安卓首页><a href="http://www.feiliu.com/android/game/list.htm">安卓游戏</a>> 角色育成 </h2>
			<span class="rtr rtr1"></span>
		</div>

3.浮动一左一右，元素块清晰区分开。<h2><span>小标题</span><a href=”#”>更多>></a></h2> 这里对 h2 span{float:left;} 对h2 a{float:right;}。如果是新闻列表<li><a href=”#”>新闻标题一</a> <span>2012-05-03</span></li>则css可以定义为ul li a{float:left;}，ul li span{float:right;}。

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

	<h2>
		<em>安卓首页><a href="http://www.feiliu.com/android/game/list.htm">安卓游戏</a>> 角色育成 </em>
		<span class="orderbydown down"><a href="javascript:void(0);" title="">下载量排序</a><b></b></span>
		<span class="orderbytime down"><a href="#" title="">时间排序</a><b></b></span>
	</h2>

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

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

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

<script type="text/javascript">
$(document).ready(function(){
	$("#channel_tit h2 span").toggle(function(){
		$(this).removeClass("down").addClass("up");
	},function(){
		$(this).removeClass("up").addClass("down");
	});
})
</script>

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

<script type="text/javascript">
$(document).ready(function(){
//只有用在a的click事件js起作用的同时，url跳转才起作用
	$("#channel_tit h2 span a").click(function(){
		if ($(this).parent().is('.down')) {
			$(this).parent().removeClass("down").addClass("up");
			$(this).preventDefault();
		}
		if ($(this).parent().is('.up')) {
			$(this).parent().removeClass("up").addClass("down");
			$(this).preventDefault();
		}
	});
})
</script>

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

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

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

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

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

相关文章：

你感兴趣的文章：

标签云：