欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
话说这个问题纠结了近一个小时,为什么呢?看看就知道了。
 
在公司的商旅Web移动版本项目上有这么一个交互,需要模仿iphone自带的开关,好吧,肯定没什么问题。
 
提示:请使用Chrome查看以下案例
 
点此查看实例展示
 
写啊写,html代码出来了:
 
<span  class = “ onoff” > <标签> <i > </ i > </ label > </ span >
然后,写啊写,css代码也出来了,但是总会出现这样的问题:
 
 
 
原因:给外层写了overflow:hidden,但是没有把其内部截断,因为是圆角的,所以这个问题陷阱一会,后来发现这个问题在Firefox下是不存在,而是并不能解决此问题,因为这个是移动端项目,木有Firefox的事儿。
 
搜啊搜,找啊找,一个不错的方法解决了这个问题:-webkit-mask-image,在chrome下测试完美!
 
但是,当上到iphone测试的时候这个问题却没有得到解决,所以,可以肯定IOS5中的浏览器对-webkit-mask-image还没有做到好的支持。
 
继续搜索,这次我只相信英语了,搜索词是“ webkit overflow hidden”,ok,第一个就是我想要的结果,查看。
 
看了看代码,很简洁,但似乎我的问题还是没有得到解决,随后又换个思路,把position给去掉试试,结果只有当把外层和内部元素的所有位置属性给去除才得以解决。
 
 
 
结论: css的位置属性会给webkit核心浏览器的overflow照成失效。
 
好吧,之前的写法这里就不说了,因为大量用到css的位置进行模块定位,导致外层溢出无法重复,因此此,更改写法,以下是css部分:
 
。onoff {
溢出:隐藏; 
显示:inline-block ; 
边距:0  0  -5px  15px ; 
宽度:60px ; 高度:20px ; 
border-radius:20px ; 
边框:实心 1px  #999;
。开关 标签{
显示:块; 
左边距:-40px ; 
宽度:100px ; 高度:20px ; 
text-align:right ; 颜色:#8B8B8B ; border-radius:20px ; 
背景:-webkit梯度(线性,左 顶,左 底,颜色-停止(0,#DFDFDF ),颜色-停止(1,#FEFEFE )) ; 
。开关 标签::在{
位置之后:亲戚; 左:-17px ; 顶部:-20px ; 
显示:inline-block ; 
内容:'' ; 宽度:6px ; 高度:6px ; 
边框:实心 2px  #999;
border-radius:10px ; 
。ONOFF 我{
显示:块; 
宽度:60px ; 高度:20px ; 
border-radius:20px ; 
背景:-webkit梯度(线性,左 顶,左 底,颜色-停止(0,#FE7D00 ),颜色-停止(1,#FEA753 )) ; 
。ONOFF 我::之前{
位置:相对; 顶部:-7px ; 左:-15px ; 
显示:内联块; 
内容:'' ; 宽度:2px ; 高度:10px ; 
背景颜色:#fff ; 
。ONOFF 我::后{
位置:相对; 顶部:-1px ; 左:1px ; 
显示:inline-block ; 
内容:'' ; 宽度:20px ; 高度:20像素; 
边框:实心 1px  #999;
border-radius:50px ; 
背景:-webkit梯度(线性,左 顶,左 底,颜色-停止(0,#DADADA ),颜色-停止(1,#FAFAFA )) ; 
box-shadow:嵌入 0  0  1px  #fff ; 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c60738.shtml