IE10和Chrome的Sencha触摸生产构建问题

Question

我遇到了基于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. 在项目根目录（实验室/）中运行"煎茶应用程序构建生产"

3. 在IE10 64位（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更改为资源/sass/app.scss中的resources/images/test1.jpeg（这实际上是有意义的，因为资源/目录在项目根目录中），并重建它用于生产。在这种情况下，图像开始出现在IE10中，但现在当我使用Chrome时 - 图像没有显示，Chrome正在尝试从这个URL中检索图像，这是不正确的：http://localhost/lab/build/production/Lab/resources/css/resources/images/test1.jpeg，并且失败了。这样它在我的本地开发环境中也不起作用。

6. 此问题发生在其他资源以及"字体"上。

您能否帮助我了解Sencha的生产构建版本无法同时在IE10和Chrome中运行的情况？这是Sencha Touch或Chrome的错误还是我在这里缺少一些东西？

Answer 1

事实证明，这是

煎茶触摸中已知的错误，得到了煎茶人的证实。检查此链接：http://www.sencha.com/forum/showthread.php?266275。感谢@peter和@arthurakay的帮助。如果我需要解决方法或对此进行进一步讨论。我将再次开始讨论。谢谢大家！

Answer 2

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

无论您是在开发还是生产中，CSS 文件都位于：

{app_root}/resources/css/app.css

假设您的图像在这里：

{app_root}/resources/images/

。那么你的文件路径应该看起来像这样：

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

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

Answer 3

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都可以正确转换路径，因为这是它们的基本任务。

Answer 4

我找到了一种解决方法，可以使图像/图标在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 将从第一个网址获取图像，Chrome 将从第二个网址获取图像。