工作中页面重构,一个分页导航重新设计了下,参考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吧.如果你发现什么问题,欢迎交流