0

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

正如您从 jsfiddle 中看到的那样，css 在浏览器上工作得非常好。

然而，在将它添加到我的 sencha 应用程序并在设备上运行它之后，它就搞砸了。动画不再播放，YES面乱七八糟：

是的一面

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

附加信息

我在一个 SASS 文件中编写我的 CSS，然后用 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 中有一个 switch 表单控件，但它看起来不像 ios 的，所以我不得不使用上面的。

谢谢

4

1 回答 1

1

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

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

这是工作小提琴。

于 2013-05-22T14:04:49.937 回答