CSS样式与Sencha触摸不能正常工作

我正在构建一个sencha应用程序。我想尝试使用像控制一样的ios开关。为此，我在CSS中使用它：jsfiddle Demo（感谢Lea Verou http://lea.verou.me）CSS样式与Sencha触摸不能正常工作

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

但是，在将它添加到我的sencha应用程序并在设备上运行后，它会混乱。动画不再玩和YES侧搞砸：

Yes side

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

信息

我书面方式我的CSS在SASS文件，然后用罗盘编译（这是推荐的方法）。

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

//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，所以我不得不使用上述。

谢谢

来源

2013-05-22 Youssef

“我知道有在煎茶开关形式的控制，但它不完全一样的IOS之一，所以我不得不使用上面。”你可以设计它。 –

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

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

Here is the working fiddle.

来源

2013-05-22 14:04:49 blessenm

非常感谢您修正了尺寸，但“YES”的蓝色仍然没有出现，并且设备上没有播放动画。你有这个想法吗？非常感谢 – Youssef

看来问题是与CSS渐变和转换的ios兼容性。试试这个更新的小提琴。 http://jsfiddle.net/blessenm/Typ3C/5/。我修改了第二个CSS块的背景图像值。在我的ipod上运行的ios 6工作。生病看我明天是否可以看到动画。 – blessenm

再次更新小提琴现在支持动画。在第二个CSS块的转换属性中添加了-webkit前缀。 http://jsfiddle.net/blessenm/Typ3C/6/ – blessenm

CSS样式与Sencha触摸不能正常工作

回答

相关问题