【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样式的效果图:

     
      
     
     

    你可能感兴趣的:(CSS笔记)