一个分页原型实现的细节

工作中页面重构,一个分页导航重新设计了下,参考yahoo的那种,原来的不方便用户点击.在测试的过程中,IE6 下发现了一些细节上的问题,下面会稍微说下,主要是做个记录.

这里说点废话,虽然google很霸气的把IE6一脚给"踹"了,但是目前国内的前端还是要兼顾IE6的.不光是年纪大点的人. 年轻人中也有不少,依然的"很不知情"的使用IE6,所以国内的W3C进程,真是任重道远.我觉得我们每个做前端地或者做互联网的 都可以为web标准的发展做点小贡献嘛,比如说服亲朋好友去升级浏览器神马的.

html代码很easy,页面是采用的html5规范,所以IE6在标准模式下盒模型是W3C标准的. 就从这点html5的规范还是不错的.页面里已经引入了reset.css和基本的fonts.css

 1 <div id="product_gallery">
 2     <!-- 顶部分页 -->
 3     <ol class="pagination">
 4         <li><a class="prev-link" href="#"><span>«</span>Prev</a></li>
 5         <li><a href="#">1</a></li>
 6         <li><a href="#">2</a></li>
 7         <li><a href="#">3</a></li>
 8         <li class="select">4</li>
 9         <li><a href="#">5</a></li>
10         <li><a class="next-link" href="#">Next<span>»</span></a></li>
11     </ol>
12     <ul>
13         <!-- 产品列表 这里省略-->
14     </ul>
15     <!-- 底部分页 -->
16     <ol class="pagination">
17         <li><a class="prev-link" href="#"><span>«</span>Prev</a></li>
18         <li><a href="#">1</a></li>
19         <li><a href="#">2</a></li>
20         <li><a href="#">3</a></li>
21         <li class="select">4</li>
22         <li><a href="#">5</a></li>
23         <li><a class="next-link" href="#">Next<span>»</span></a></li>
24     </ol>
25 </div>

下面是对应的css:

 1 #product_gallery ol.pagination {
 2     overflow: hidden;
 3     float: right;
 4     margin:0.1em 0.2em 0.2em 0;
 5 } 
 6 #product_gallery ol.pagination li {
 7     /* display: inline; 防止IE6双边距 */
 8     display: inline;
 9     float: left;
10     margin-right: 0.6em; 
11 }
12 #product_gallery ol.pagination a:link,
13 #product_gallery ol.pagination a:visited,
14 #product_gallery ol.pagination li.select {
15     color: blue;
16     /*
17      这里有个有趣的现象,display:block的话,
18      鼠标移到a的padding部分(已经进入a),鼠标依然是default样式即箭头,
19      要到页码鼠标才出现pointer样式即小手.虽说不影响什么,但是鼠标移过总感觉怪怪的,
20      把display改成inline-block就好了.
21      IE6下对于行内元素如span,a等使用display:inline-block会产生预期的效果,
22      但是对于块级元素如div等,是不会产生什么作用的.
23      可以理解为display:inline-block触发了行内元素的haslayout属性
24     */
25     display: inline-block;
26     border: 1px solid #ccc;
27     padding: 0.1em 0.5em;
28     text-align: center;
29 }
30 #product_gallery ol.pagination a {
31     background-color: #fff;
32 }
33 #product_gallery ol.pagination a:hover {
34     background-color: blue;
35     color: #fff;
36 }
37 #product_gallery ol.pagination a.prev-link,
38 #product_gallery ol.pagination a.next-link {
39     border: none !important;
40 }
41 #product_gallery ol.pagination li.select {
42     background-color: blue;
43     color: #fff;
44     /*
45      这里也有个细节问题,如果不加cursor:default,IE6下鼠标移到页码时显示的样式为编辑样式,
46      这样造成了一些不统一,所以直接用cursor:default,用默认箭头即可
47     */
48     cursor: default;
49 }
50 #product_gallery ol.pagination a.prev-link span,
51 #product_gallery ol.pagination a.next-link span {
52     display: inline-block;
53     cursor: pointer;
54 }
55 #product_gallery ol.pagination a.prev-link span {
56     margin-right: 0.2em;
57 }
58 #product_gallery ol.pagination a.next-link span {
59     margin-left: 0.2em;
60 }

以后用到

1 <ul><li><a></a></li>...</ul>

这种结构做导航什么的,想让li下的a元素表现block特性,一般就用display:inline-block吧.如果你发现什么问题,欢迎交流

转载于:https://www.cnblogs.com/AndyWithPassion/archive/2011/08/12/pagination.html