
			<p>话说这个问题纠结了近一个小时，为什么呢？看看就知道了。</p>
<p>在公司的商旅Web移动版本项目上有这么一个交互，需要模仿iphone自带的开关，好吧，肯定没什么问题。</p>
<p><strong>Tip：</strong>请使用Chrome查看以下案例</p>
<p style="text-align: center;"><a class="btn-demo" href="http://www.daqianduan.com/example/?pid=4548" target="_blank">点此查看实例展示</a></p>
<p><strong>写啊写，html代码出来了：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;span</span> <span style="color: #00c;">class</span>=<span style="color: #a11;">"onoff"</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;label</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;i</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;/i</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;/label</span><span style="color: #170;">&gt;</span><span style="color: #170;">&lt;/span</span><span style="color: #170;">&gt;</span></pre>
<p>然后，写啊写，css代码也出来了，但是总会出现这样的问题：</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-4550" title="onoff-1" src="http://www.daqianduan.com/wp-content/uploads/2012/08/onoff-1.jpg" alt="" width="293" height="272" /></p>
<p>原因：给外层写了<code>overflow:hidden</code>，但是没有把其内部截断，因为是圆角的，所以这个问题困扰了一会，后来发现这个问题在Firefox下是不存在，但这并不能解决此问题，因为这个是移动端项目，木有Firefox的事儿。</p>
<p>搜啊搜，找啊找，一个不错的方法解决了这个问题:<code>-webkit-mask-image</code>，在chrome下测试完美！</p>
<p><strong>But</strong>，当上到iphone测试的时候这个问题却没有得到解决，so，可以肯定IOS5中的浏览器对-webkit-mask-image还没有做到好的支持。</p>
<p>继续搜索，这次我只相信英文了，搜索词是“<code>webkit overflow hidden</code>”，ok，第一个就是我想要的结果，<a href="http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera" target="_blank">查看</a>。</p>
<p>看了看代码，很简洁，但似乎我的问题还是没有得到解决，随后又换个思路，把<code>position</code>给去掉试试，结果只有当把外层和内部元素的所有position属性给去除才得以解决。</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-4550" title="onoff-1" src="http://www.daqianduan.com/wp-content/uploads/2012/08/onoff-2.jpg" alt="" /></p>
<p><strong>结论：</strong>css 的position属性会给webkit核心浏览器的overflow照成失效。</p>
<p>好吧，之前的写法这里就不说了，因为大量用到css的position进行模块定位，导致外层overflow失效，鉴于此，更改写法，以下是css部分：</p>
<pre style="margin:15px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444">.<span style="color:#170">onoff</span>{<br />	<span style="color:#000">overflow</span>: <span style="color:#164">hidden</span>;<br />	<span style="color:#000">display</span>: <span style="color:#164">inline-block</span>;<br />	<span style="color:#000">margin</span>:<span style="color:#164">0</span> <span style="color:#164">0</span> <span style="color:#164">-5px</span> <span style="color:#164">15px</span>;<br />	<span style="color:#000">width</span>: <span style="color:#164">60px</span>;<span style="color:#000">height</span>:<span style="color:#164">20px</span>;<br />	<span style="color:#000">border-radius</span>: <span style="color:#164">20px</span>;<br />	<span style="color:#000">border</span>: <span style="color:#164">solid</span> <span style="color:#164">1px</span> <span style="color:#219">#999</span>;<br />}<br />.<span style="color:#170">onoff</span> <span style="color:#170">label</span>{<br />	<span style="color:#000">display</span>: <span style="color:#164">block</span>;<br />	<span style="color:#000">margin-left</span>: <span style="color:#164">-40px</span>;<br />	<span style="color:#000">width</span>: <span style="color:#164">100px</span>;<span style="color:#000">height</span>: <span style="color:#164">20px</span>;<br />	<span style="color:#000">text-align</span>: <span style="color:#164">right</span>;<span style="color:#000">color</span>: <span style="color:#219">#8B8B8B</span>;<span style="color:#000">border-radius</span>:<span style="color:#164">20px</span>;<br />	<span style="color:#000">background</span>: <span style="color:#164">-webkit-gradient</span><span style="color:#164">(linear</span>,<span style="color:#164">left</span> <span style="color:#164">top</span>,<span style="color:#164">left</span> <span style="color:#164">bottom</span>,<span style="color:#164">color-stop</span><span style="color:#164">(0</span>,<span style="color:#219">#DFDFDF</span><span style="color:#164">)</span>,<span style="color:#164">color-stop</span><span style="color:#164">(1</span>,<span style="color:#219">#FEFEFE</span><span style="color:#164">)</span><span style="color:#164">)</span>;<br />}<br />.<span style="color:#170">onoff</span> <span style="color:#170">label</span>::<span style="color:#170">after</span>{<br />	<span style="color:#000">position</span>: <span style="color:#164">relative</span>;<span style="color:#000">left</span>:<span style="color:#164">-17px</span>;<span style="color:#000">top</span>: <span style="color:#164">-20px</span>;<br />	<span style="color:#000">display</span>: <span style="color:#164">inline-block</span>;<br />	<span style="color:#000">content</span>: <span style="color:#a11">''</span>;<span style="color:#000">width</span>: <span style="color:#164">6px</span>;<span style="color:#000">height</span>: <span style="color:#164">6px</span>;<br />	<span style="color:#000">border</span>: <span style="color:#164">solid</span> <span style="color:#164">2px</span> <span style="color:#219">#999</span>;<br />	<span style="color:#000">border-radius</span>: <span style="color:#164">10px</span>;<br />}<br />.<span style="color:#170">onoff</span> <span style="color:#170">i</span>{<br />	<span style="color:#000">display</span>: <span style="color:#164">block</span>;<br />	<span style="color:#000">width</span>: <span style="color:#164">60px</span>;<span style="color:#000">height</span>: <span style="color:#164">20px</span>;<br />	<span style="color:#000">border-radius</span>:<span style="color:#164">20px</span>;<br />	<span style="color:#000">background</span>: <span style="color:#164">-webkit-gradient</span><span style="color:#164">(linear</span>,<span style="color:#164">left</span> <span style="color:#164">top</span>,<span style="color:#164">left</span> <span style="color:#164">bottom</span>,<span style="color:#164">color-stop</span><span style="color:#164">(0</span>,<span style="color:#219">#FE7D00</span><span style="color:#164">)</span>,<span style="color:#164">color-stop</span><span style="color:#164">(1</span>,<span style="color:#219">#FEA753</span><span style="color:#164">)</span><span style="color:#164">)</span>;<br />}<br />.<span style="color:#170">onoff</span> <span style="color:#170">i</span>::<span style="color:#170">before</span>{<br />	<span style="color:#000">position</span>: <span style="color:#164">relative</span>;<span style="color:#000">top</span>: <span style="color:#164">-7px</span>;<span style="color:#000">left</span>:<span style="color:#164">-15px</span>;<br />	<span style="color:#000">display</span>: <span style="color:#164">inline-block</span>;<br />	<span style="color:#000">content</span>: <span style="color:#a11">''</span>;<span style="color:#000">width</span>: <span style="color:#164">2px</span>;<span style="color:#000">height</span>: <span style="color:#164">10px</span>;<br />	<span style="color:#000">background-color</span>: <span style="color:#219">#fff</span>;<br />}<br />.<span style="color:#170">onoff</span> <span style="color:#170">i</span>::<span style="color:#170">after</span>{<br />	<span style="color:#000">position</span>: <span style="color:#164">relative</span>;<span style="color:#000">top</span>: <span style="color:#164">-1px</span>;<span style="color:#000">left</span>:<span style="color:#164">1px</span>;<br />	<span style="color:#000">display</span>: <span style="color:#164">inline-block</span>;<br />	<span style="color:#000">content</span>: <span style="color:#a11">''</span>;<span style="color:#000">width</span>: <span style="color:#164">20px</span>;<span style="color:#000">height</span>: <span style="color:#164">20px</span>;<br />	<span style="color:#000">border</span>: <span style="color:#164">solid</span> <span style="color:#164">1px</span> <span style="color:#219">#999</span>;<br />	<span style="color:#000">border-radius</span>: <span style="color:#164">50px</span>;<br />	<span style="color:#000">background</span>: <span style="color:#164">-webkit-gradient</span><span style="color:#164">(linear</span>,<span style="color:#164">left</span> <span style="color:#164">top</span>,<span style="color:#164">left</span> <span style="color:#164">bottom</span>,<span style="color:#164">color-stop</span><span style="color:#164">(0</span>,<span style="color:#219">#DADADA</span><span style="color:#164">)</span>,<span style="color:#164">color-stop</span><span style="color:#164">(1</span>,<span style="color:#219">#FAFAFA</span><span style="color:#164">)</span><span style="color:#164">)</span>;<br />	<span style="color:#000">box-shadow</span>: <span style="color:#164">inset</span> <span style="color:#164">0</span> <span style="color:#164">0</span> <span style="color:#164">1px</span> <span style="color:#219">#fff</span>;<br />}</pre>
<p style="text-align: center;"><a class="btn-demo" href="http://www.daqianduan.com/example/?pid=4548" target="_blank">点此查看实例展示</a></p>
<p>嗯，问题解决，有更好方法的同学可以留言交流，移动web还是很好玩的。</p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/css3-iphone-onoff/">CSS3 iphone式开关的推荐写法</a></p>		