2

我正在开发一个 ExtJS4 应用程序 - 自定义报告应用程序。

ExtJS4 通过自动回退所有带有图像和表格（修改标记）的 css3 来使用可怕的优雅降级原则。正因为如此，它使已经膨胀的标记变得非常膨胀，并用默认图像改变了所有的渐变/边框。

我不确定它除了 css3 元素还有什么变化，但这里是应用程序截图。

这是 IE8： 坏 - IE8

这是谷歌浏览器： 好 - 铬

...

  1. 除了必须检查所有标记并撤消这些糟糕的设计决策
  2. 除了必须重新创建所有图像以匹配现有设计
  3. 除了必须修改核心文件以强制不支持 x-nlg、x-nbr 等的浏览器发生优雅降级之外。

2012-11-23 更新

煎茶片： 坏 - IE8

ExtJS 核心覆盖： 好 - IE8

是否有任何其他方法或设置（javascript 或 sass）可以更轻松地处理所有这些兼容性问题？

4

1 回答 1

5

因此，在没有答案的情况下，我将提供我采用的实现。

正如您在上面看到的，这个复杂的 ExtJS 4.1 应用程序具有复杂的设计。sencha slice 工具没有任何作用（但是，如果您想保留所有 sencha 默认值并只是更改应用程序的基本颜色，可能是基本 SASS 变量，它确实可以工作？）。

另一方面，您可以看到 Ext 覆盖效果如何。一个相当稳固的过渡，看起来 95% 相同（或者正如 Chris Coyier 所说的，“嗯，足够好”）。

下面是我的实现：

Ext.application({
    ...
    init: function () {
        // Override CSS3BorderRadius value which caused render problems in <IE9 when false.
        Ext.supports['CSS3BorderRadius'] = true;

        // Hack-ish remove class sniffers from Ext.EventManager (which attaches modrnizer type classes onto the body)
        Ext.getBody().removeCls('x-nbr x-nlg');
    }
    ...
});

这个实现很优雅，因为：

  1. “我”将编写可以工作的跨浏览器 CSS。我不需要 sencha 用它的“更聪明”、更糟糕的 CSS 来覆盖我的 CSS。
  2. 我知道旧版浏览器无法处理圆角——我不想要它们。
  3. 我知道 IE 无法处理线性渐变——默认情况下我不想要图像。我想使用过滤器：程序。
  4. 我不希望 Sencha 用数十个自定义图像、数十个嵌套容器和大量表格来膨胀我的标记

gg 希望这对某人有帮助

于 2012-11-20T03:40:35.993 回答