Css 使用IE10和Chrome的Sencha Touch生产构建问题

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

复制步骤：

Main.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;
}

确保在resources/sass/app.scss-

。/../resources/images/test1.jpeg中的背景图像URL如下所示

在项目根目录（Lab/）中运行“sencha应用程序构建生产”

以IE10 64位（Win 7）访问应用程序：

http://localhost/lab/build/production/Lab/

IE10中根本没有显示图像。然而，当在Chrome中尝试此功能时，效果很好。Chrome能够以某种方式将

。/../resources/images/test1.jpeg

转换为

http://localhost/lab/build/production/Lab/resources/images/test1.jpeg

但IE10没有这样做，并且无法显示图像。这样，它也可以在我的本地开发环境中工作，因为它符合我的项目结构

为了使其在IE10中工作，我将resources/sass/app.scss中的图像URL从

。/../resources/images/test1.jpeg

更改为

resources/images/test1.jpeg

（这实际上是有意义的，因为resources/directory位于项目根目录中），并为生产重建它。在这种情况下，图像开始出现在IE10中，但现在当我使用Chrome时，图像不会显示，Chrome正在尝试从这个URL检索图像，但不正确：

http://localhost/lab/build/production/Lab/resources/css/resources/images/test1.jpeg

，但它失败了。这种方式在我当地的开发环境中也不起作用

其他资源（如“字体”）也会出现此问题

---

你能帮我理解Sencha的产品构建版本不能同时在IE10和Chrome上运行的原因吗？这是Sencha Touch或Chrome的bug还是我在这里遗漏了什么？

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

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

{app_root}/resources/css/app.css

假设您的图像在这里：

{app_root}/resources/images/

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

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

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

您访问应用程序的地址（在任何浏览器中）将成为页面基址。在您的情况下，它是

http://localhost/lab/build/production/Lab/

您可以通过打印

警报（document.location.href）

来确认这一点
请检查后面的斜杠

地址

。/../resources/images/test1.jpeg

则表示

http://localhost/lab/build/production/Lab/../../resources/images/test1.jpeg

并转换为不正确的

http://localhost/lab/build/resources/images/test1.jpeg

将相对地址修改为

。/resources/images/test1.jpeg

以获取

http://localhost/lab/build/production/resources/css/resources/images/test1.jpeg

您始终可以通过将结果地址输入浏览器的地址栏来验证该地址。

---

IE和Chrome都能正确地转换路径，因为这是他们的基本任务。

这是Sencha Touch中已知的bug，Sencha人证实了这一点。检查此链接：。谢谢@peter和@arthurakay对你的帮助。如果我需要解决方法或进一步讨论。我将再次开始讨论。谢谢大家

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

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

.menuHome{
背景：url（resources/icons/menu/Home.png），url（../icons/menu/Home.png）无重复中心；
}

---

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

IE10将路径转换为什么？（可以使用某种网络分析仪、Wireshark等）。使用

。/../resources/images/test1.jpeg

IE10将其转换为

http://localhost/lab/build/resources/images/test1.jpeg

-不工作（路径中缺少“生产”）当使用

resources/images/test1.jpeg

IE10将其转换为

http://localhost/lab/build/production/Lab/resources/images/test2.jpeg

，它可以工作。我觉得IE10所做的可能是正确的，但Chrome对路径所做的并不正确。请看我上面提到的第5点。你怎么想？谢谢@arthurakay的回复。我正在使用触摸2.3.0和cmd 4.0.1.30。我已经试过你的建议了，问题仍然存在。使用相对路径-Chrome能够理解路径并转换为

http://localhost/lab/build/production/Lab/resources/images/test1.jpeg

但IE10将其转换为

http://localhost/lab/build/production/images/test1.jpeg

但IE10找不到它。请尝试清除本地存储和缓存。。。我想知道这里是否有交叉点。清除了缓存，所有东西，清除了IE10和Chrome上的本地存储，尝试了运行场景4和场景5。仍然看到同样的行为。感觉Chrome试图从

resources/css/

目录中查找图像，但IE10从项目根目录中查找图像。感谢Peter的回复。感谢你的解释。不幸的是，我尝试过使用不同的相对路径，但没有任何效果。我怀疑Sencha Touch生产构建过程（index.html文件的生成方式）存在问题。但是，当进行测试构建（sencha应用程序构建测试）时，该网站在Chrome和IE10上都可以正常工作。您是否尝试过

document.location.href

并查看页面源代码？现在我们正在做什么，我们已经修改了sencha Touch的生产微加载器。以前，它将CSS嵌入index.html中，但没有