解决:分页页码导航使用ul和li时采用inline-block浏览器兼容的问题

解决:分页页码导航使用ul和li时采用inline-block浏览器兼容的问题

1927发表于2015-10-21

今天在测试页面浏览器兼容性的时候,用户反映360浏览器有问题,页码被挤下去了。

异常结果:

正常结果:


做前端的同学会经常说早期的IE浏览器就像一坨屎,因为不同版本的IE都相互不兼容。

我也想说360浏览器就是一个怪胎,360浏览器原来是用的IE内核,现在又用的是Chrome的内核。现在的360为了两个都想占有,就推出了一个浏览器的兼容模式和极速模式。如下图:



由于极速模式是Chrome内核,而兼容模式是IE内核。

当采用极速模式是没有问题,用兼容模式浏览我们的网页时页码有时有问题,有时没有问题。

对于用户可能不知道360浏览器的这两种模式,也不知道怎么切换。而且我们也不可能每次都要给客户说请换到360的极速模式。

原来在360兼容模式下按F12会出来IE的网页调试页面,可以选择文档模式:


当选择IE7标准是就会有问题。用户在360兼容模式时不能确定是在哪种IE版本下,这和用户本机所装的IE版本有很大的关系。

下面来看看我的分页导航部分的html和css相关的代码。

html:

<div class="pagination">
	<ul>
		<li><a href="?pageNum=1">首页</a></li>
		<li class="active"><a>1</a></li>
		<li><a href="pageNum=2">2</a></li>
		<li><a href="?pageNum=3">3</a></li>
		<li><a href="?pageNum=2">下一页&gt;|</a></li>
		<li><a href="?pageNum=3">末页</a></li>
	</ul>
</div>

css:

div.pagination > ul {
    color: #6d6d6d;
    display: inline-block;
    margin: 0;
    padding: 0;
    word-spacing: -0.5px;
}
.pagination li {
    display: inline-block;
    vertical-align: middle;
    word-spacing: normal;
    border: 1px solid #dedede;
    border-collapse: collapse;
}

.pagination li > a,
.pagination li > span {
    display: inline-block;
    min-width: 41px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 16px;
    color: #6d6d6d;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 2px solid #e4e7ea;
    outline: none;
    -webkit-transition: .25s ease-out;
    transition: .25s ease-out;
}
.pagination li > a:hover,
.pagination li > span:hover,
.pagination li > a:focus,
.pagination li > span:focus {
    color: #6d6d6d;
    background-color: #efefef;
}
.pagination li > a:active,
.pagination li > span:active {
    color: #6d6d6d;
    background-color: #fff;
}
.pagination li.active{background-color: #fff;border: 0;}
.pagination li.active a:hover{background-color: #fff;border: 0;}
.pagination li a {
    border-left-width: 0;
}
.pagination li:first-child,.pagination li:last-child{background-color: #efefef;}
.pagination > .btn.previous,
.pagination > .btn.next {
    padding-right: 23px;
    padding-left: 23px;
    margin-right: 8px;
    font-size: 14px;
    line-height: 1.429;
}

一、问题分析:

由于我页码采用的是li,li是块级元素,我用的是display: inline-block代替的浮动,但是display: inline-block在ie7下不显示,但在ff中是正常的,下面我来给大家整理了一些解决ie7 下display: inline-block不兼容问题的办法。

方法一

.ie7 {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

后来又看到一方法

#id{display:inline-block;}
#id{display:inline;}

注意:一定要分开写,如果写在同一个选择器里是不起作用的,这是IE的一个bug。

在IE下,display:inline-block只是触发了元素的layout。比如将display:inline-block给到div上,只能保证这个div拥有块元素的特征(可以设置宽度和高度),但是还是行布局(产生换行)。接下来要设置display:inline.更改这个div的布局为内联布局(不产生换行)。


附后一方法

IE6下块元素如何实现display:inline-block的效果?

有两种方法:

1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):

div {display:inline-block;...} 
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:

div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

二、针对解决办法

在.pagination li要样式里面加上*zoom和*display属性,如下:

.pagination li {
    display: inline-block;
    vertical-align: middle;
    word-spacing: normal;
    border: 1px solid #dedede;
    border-collapse: collapse;
     *zoom: 1;
     *display: inline;
}


清除css缓存,搞定!

三、问题总结

对于在页面中使用inline-block一定要注意,因为对于IE及以下的浏览器是不支持的,会有潜在的浏览器兼容问题。这种情况可以避免使用inline-block属性。比如:我在本例用到的页码导航,可以不用ul和li而是用span来代替,如下html代码结构:

<div class="pagination">
		<a href="?pageNum=1">首页</a>
		<span class="active">1</span>
		<a href="pageNum=2">2</a>
		<a href="?pageNum=3">3</a>
		<a href="?pageNum=2">下一页&gt;|</a>
		<a href="?pageNum=3">末页</a>
</div>

这样我们写css样式就要针对div下的a和span标签了。


小编蓝狐