css使用的一些技巧,实现slider,inline-block的跨浏览器

梁鹏 — Fri, 21 Nov 2008 04:47:35 +0000

使用Jquery实现Slider功能，使用Div
今天为了实现jquery这样的效果 http://ui.jquery.com/repository/real-world/product-slider/ 同时，需要能够拖动里面的图标（里面的图标我使用了div）今天折腾了半天，终于找到了实现方法，主要设计下面几个属性
外围的div使用如下属性：
overflow: hidden;
white-space: nowrap;
position:raletive; //没有他，则上面的hidden不行。
中间的div使用属性
position:absolute;
最里面的div使用如下属性：
display:inline-block;
注意中围使用 position:absolute; 的主要目的是为了获得包括其已经隐藏的所有内容的宽度。
（代码示例如见最下）

跨浏览器的 inline-block 实现
上面的display:inline-block;在ie下不能使用，经过google，可以使用
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
实现跨浏览器的inline-block，原文跨浏览器的 inline-block 实现[CSS] 和 Cross Browser Support for inline-block Styling
但是我试了，firefox支持，inline-block，则不需要对firefox进行特殊处理的 display: -moz-inline-stack;
演示代码：
-->





 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d
 d



a
b
c
d
e
f
g
a
b
c
d
e
f
g
a
b
c
d
e
f
g
a
b
c
d
e
f
g

朝圣者(梁鹏) » 跨浏览器

css使用的一些技巧,实现slider,inline-block的跨浏览器