CSS样式无法与Sencha touch一起正常使用

Question

我正在构建一个sencha应用程序。 我想尝试使用类似控件的ios开关。 为此，我在CSS中有它： jsfiddle演示 （感谢Lea Verou http://lea.verou.me ）

从jsfiddle中可以看到，css在浏览器上工作得很好。

但是，将其添加到我的sencha应用程序中并在设备上运行后，它被弄乱了。 动画不再播放，并且YES一侧被弄乱了：

可能是什么问题？ CSS的某些部分与sencha应用程序不兼容吗？ 为什么它可以在浏览器上正常运行，但不能在设备上运行？

附加信息

我将CSS写入SASS文件中，然后使用Compass进行编译（这是推荐的方法）。

我的SASS文件还包括sencha的一些基本样式：

//I PASTED THE SWITCH CSS (FROM THE FIDDLE EXAMPLE) HERE

//IMPORTING THE SENCHA STYLES THAT I WILL USE
//Sencha Css
@import 'sencha-touch/default/all';

//Including Pictos we need to use
@include pictos-iconmask('team1');
@include pictos-iconmask('user3');
@include pictos-iconmask('settings7');
@include pictos-iconmask('shop1');

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-msgbox;

可能是什么问题？

PS：我知道sencha中有一个开关窗体控件，但它看起来并不完全像ios，因此我不得不使用上面的控件。

谢谢

Answer 1

我修改了CSS中的第三块。 我将宽度从1em增加到3em。

input[type="checkbox"].ios-switch:checked + div {
    padding-left: 2em;
    width: 3em;
    background-position: 0 0;
}

这是工作中的小提琴。