朝圣者(梁鹏) » css

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

谈谈我当前对富客户端的看法

梁鹏 — Mon, 17 Nov 2008 11:18:03 +0000

正在制作一个web2.0的网站，鉴于装逼的最先进性，随想到了富客户端，为什么我们不用呢？
为甚麽不使用象flash一样的富客户端，而要用php+js来构建web2.0呢，我自己认为是html更容易构建漂亮的界面，更容易来输出内容，而flash则每次界面变动都需要各种各样的调整，（如果现在的flash已经发展了，我不知道，只是根据自己以前的认知进行的总结），很容易针对某块进行局部调整，特别是div+css的模式下。
而为什么需要php这样的后台语言呢，既然现在的事情全部都由js完成了，目前看来，php现在的主要功能是组织了各种各样的action，进行模块化开发，除此之外，php仅仅就是提供数据给前台展示了，完全可以推出一款统一的后台数据库接口，由js直接读取数据，进行展示即可，这样就仅仅需要前端编码了，可是，现在的前端数据展示功能也有些弱，如果不使用php进行基本html生成，貌似完全使用js进行定位填充，需要的代码量相当复杂。
由此看来目前的技术前提下，php+div+css+js确实是最行之有效的方法。
本人是php coder，所以仅仅拿php来分析，asp、jsp、ruby等皆可。

FireFox和IE浏览器对于DIV+CSS的区别[转载]

梁鹏 — Sun, 07 Sep 2008 02:43:54 +0000

1、单位问题问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外）解决：写全单位如padding:0px;

2、水平居中问题：div里的内容，ie默认为center，而ff默认left 解决：mairgin:0px auto;

3、高度问题问题：如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的告诉，超过部分超出DIV底线以外，出现和下面的内容重叠的现象解决：控制恰当的高度，或者不写，让浏览器自动调节高度，或者设置overflow:hidden;

4、clear:both; 问题：如果上面用float控制了n列DIV，下面ie会自动检测自动排列，ff则可能很不老实，到处乱动解决：float结束后的下一个标签加clear:both;以结束float的控制

5、最大/小宽度问题问题：min-width,max-width只是ff的命令，如何让ie实现同样的效果解决：ie不认识min-和max-，实际ie认为min-width、max-width和width效果一样，可以用下面方法解决

#cctext{ min-width: 700px;

max-width: 1000px;

width:expression(document.body.clientWidth<700 ? “700px” :document.body.clientWidth>1000 ? “1000px” : “auto”); }

6、!important支持问题：ff支持ie不支持解决：无。ie会忽略。

7、游标状态问题：cursor:hand;仅ie支持，显示手指状态解决：使用cursor:pointer;ie和ff都支持

8、实际像素 IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right) Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right) 所以排列好及列的表格时ie和ff显示宽度稍有区别