Sencha touch 2.2 应用程序布局在 chrome 29 中中断答案

【问题标题】：Sencha touch 2.2 application layout breaks in chrome 29Sencha touch 2.2 应用程序布局在 chrome 29 中中断
【发布时间】：2013-09-05 04:31:43
【问题描述】：

有一天，当我在 sencha touch 2.2 中检查我的应用程序时，它的布局完全被破坏了。我意识到我的 Chrome 已经从 28 自动更新到 29。它在 chrome 28 及更早版本以及任何其他 webkit 浏览器中都能完美运行.当我检查示例应用程序来自 sencha touch 包时，它似乎也坏了。我的客户也使用 chrome 29。如何解决 chrome 29 的这个布局问题？

【问题讨论】：

标签： google-chrome layout sencha-touch sencha-touch-2

【解决方案1】：

我遇到了同样的问题，我已经解决了。

前往

touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss 在您的应用中

将 mixin st-box 替换为以下内容并使用 compass 重新编译您的 css：

@mixin st-box($important: no) {
    @if $important == important {
        display: flex !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
    } @else {
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
    }
}

【讨论】：

【解决方案2】：

我也遇到了问题，我成功更新到 sencha 2.2.1。您可以使用 sencha cmd 使用命令 sencha upgrade 轻松升级您的项目。 http://docs-origin.sencha.com/touch/2.2.1/#!/guide/command

【讨论】：

【解决方案3】：

在你的 touch framework 文件夹中打开以下 Sass mixin：资源/主题/样式表/sencha-touch/base/mixins/_Class.scss

搜索 st-box mixin，并将代码替换为： //修复 chrome 29 错误。 - 它只是切换顺序 //的显示规则

@mixin st-box($important: no) {
    @if $important == important {
        display: flex !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
    } @else {
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
    }
}

接下来要做的是编译 Sass 样式表。你需要在你的机器上安装 Sass & Compass（和 Ruby）。在命令行上，浏览到文件夹： 触摸/资源/sass 并运行以下行：指南针手表

这应该可以解决最新 Chrome 浏览器的 Sencha Touch 问题！（如果您没有安装 Sass/Compass 并且只想要生成的 app.css，请随时从此处下载。 http://www.ladysign-apps.com/developer/wp-content/uploads/2013/08/app.css

【讨论】：