1

我遇到了基于 Sencha Touch 的应用程序的生产构建版本无法在 IE10 和 Chrome 中正确应用样式的问题。

重现步骤：

主.js

Ext.define('Lab.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [

],
config: {
tabBarPosition: 'bottom',

items: [

{
xtype: 'panel',
cls: 'MyFirstLogo',
itemId: 'firstLogo'
} ]
}
});

SCSS 文件 - app.scss

.MyFirstLogo{
height: auto !important;
min-height: 100px;
min-width: 404px;
padding: 0px;
background-image:url(../../resources/images/test1.jpeg);
background-repeat:no-repeat;
background-position: left;
}

  1. 确保背景图片 URL 在 resources/sass/app.scss - 中是这样的../../resources/images/test1.jpeg。

  2. 在项目根目录（Lab/）中运行“sencha app build production”

  3. 在 IE10 64bit (Win 7) 中访问应用程序：http://localhost/lab/build/production/Lab/

  4. IE10 中根本不显示图像。但是，在 Chrome 中尝试此操作时效果很好。Chrome 能够以某种方式将其转换../../resources/images/test1.jpeg为http://localhost/lab/build/production/Lab/resources/images/test1.jpeg但 IE10 不这样做并且无法显示图像。这样它也可以在我的本地开发环境中工作，因为它与我的项目结构一致。

  5. 为了使其在 IE10 中工作，我已将图像 URL 从更改../../resources/images/test1.jpeg为resources/images/test1.jpeg（这实际上是有意义的，因为 resources/ 目录位于项目根目录中）并重建它以用于生产。在这种情况下，图像开始出现在 IE10 中，但现在当我使用 Chrome 时 - 图像不显示，并且 Chrome 正在尝试从此 URL 检索图像，该 URL 不正确: http://localhost/lab/build/production/Lab/resources/css/resources/images/test1.jpeg，但失败了。这样它在我的本地开发环境中也不起作用。

  6. 其他资源以及“字体”等资源都会出现此问题。

您能否帮助我了解 Sencha 的 Production Build 版本无法同时在 IE10 和 Chrome 中运行的情况？这是 Sencha Touch 或 Chrome 的错误还是我在这里遗漏了什么？

4

4 回答 4

2

事实证明，这是 Sencha Touch 中已知的错误，已得到 Sencha 人的确认。检查此链接：http ://www.sencha.com/forum/showthread.php?266275 。感谢@peter 和@arthurakay 的帮助。如果我需要解决方法或对此进行进一步讨论。我将再次开始讨论。多谢你们！

于 2013-11-08T00:00:35.707 回答
0

为什么要在相对文件路径中返回这么多目录？

无论您是处于开发阶段还是生产阶段，CSS 文件都位于：

{app_root}/resources/css/app.css

假设您的图像在这里：

{app_root}/resources/images/

...那么您的文件路径应如下所示：

background-image:url(../images/test1.jpeg);

仅供参考，我假设是 Touch 2.3 和 Cmd 4.0.x，因为您没有指定。

于 2013-11-07T14:13:25.250 回答
0
  1. 您访问应用程序的地址（在任何浏览器中）成为页面基地址。在您的情况下，http://localhost/lab/build/production/Lab/
    您可以通过打印来确认这一点alert(document.location.href)。
    请检查尾部斜杠。
  2. 然后地址../../resources/images/test1.jpeg意味着 http://localhost/lab/build/production/Lab/../../resources/images/test1.jpeg并翻译为不正确
    http://localhost/lab/build/resources/images/test1.jpeg
  3. 修改相对地址../resources/images/test1.jpeg以获取
    http://localhost/lab/build/production/resources/css/resources/images/test1.jpeg

您始终可以通过将结果地址输入到浏览器的地址栏中来验证结果地址。
IE 和 Chrome 都能正确翻译路径，因为这是它们的基本任务。

于 2013-11-07T18:37:28.813 回答
0

我找到了一种解决方法，可以让图像/图标在 IE10 和 Chrome 上都可见。

在这里，为包含“背景图像”的任何给定类提供的 CSS 属性应包含 IE10 和 Chrome 的工作 URL，如下所示：

.menuHome { background:url(resources/icons/menu/Home.png),url(../icons/menu/Home.png) no-repeat center; }

这里两个 URL 都出现在 CSS 属性中。因此 IE10 将从第一个 URL 获取图像，Chrome 将从第二个 URL 获取图像。

于 2014-04-11T15:18:27.027 回答