1

Web ベースのアプリケーションのフロントエンドの再設計に取り組んでいます。Extjs 6 に基づく PoC から始めましたが、互換性の問題はほとんどありません。これらの互換性の問題は IE8 と CSS に関連していますが、Web サイトでは Extjs6 が IE8 に完全に準拠していると記載されています。

CSS クラスはすべての主要な Web ブラウザー (Firefox、IE11、Chrome など) で完全に機能しますが、IE8 では機能しないものもあります。

これは、IE8 で CSS が正しく機能しない例です。

  Ext.create('Ext.button.Button',{
                text:'Button Test',
                cls: 'btnColor',
                renderTo: Ext.getBody(),
      });

  .btnColor {
        background-color: green;
        border-color:green;
   }

IE11 で動作します: ここに画像の説明を入力 IE8 では動作しません: ここに画像の説明を入力

これが既知の問題であるかどうか、また、この種のニーズに対応できる特定の処理があるかどうかを知りたいです。

前もって感謝します。

4

3 に答える 3

0

問題は JavaScript の構文です。

IE8 以前では、配列とオブジェクトの末尾のコンマについて厳密です。

行renderTo: Ext.getBody(),はカンマで終わりますが、オブジェクトの最後の項目です。IE8 では、これはコンパイルに失敗します。

解決策は、そのコンマを削除することです。

JSHint や ESLint などのリンティング ツールを使用してコードを実行することで、これらの種類のものに目を光らせておくことができます。

于 2015-10-16T21:39:55.153 に答える
0

Sencha サポートチームの回答:

https://www.sencha.com/forum/showthread.php?305980-CSS-compatibility-issues-on-IE-8.&p=1118734#post1118734

これは私にとって多くを明確にしました、それはあなたを助けるかもしれません:)

于 2015-10-22T10:00:12.120 に答える
0

上記のコメントの要素は間違った要素です。これはボタンの内部要素です。次のようなIDを持つクラスが必要ですbutton-1009（階層内のいくつかの要素のアンカーまたはdivタグになります）。

なぜ機能しないのかについては、背景色を定義する複数の CSS セレクターが存在することになります。ExtJS のデフォルトはx-btn-default-large. 属性の完全な CSS クラスは次のようになりますx-btn buttonCls x-unselectable x-btn-default-large x-border-box。

このようにすると、 と の両方buttonClsがx-btn-default-large等しく有効な選択肢になります。ブラウザは使用するものを選択する必要があります。IE8 は最後のものを選択しています。他のブラウザは最初のものを選択しています。どちらも間違っていません - あいまいさはあなたのコードにあります。

これを修正するには、CSS セレクターをより具体的にします。試す：

.x-btn.buttonCls {
  background-color: green;
  border-color:green;
}

これは、 cls 属性x-btnを持つボタン (componentCls 属性を持つ唯一のもの)に適用されます。buttonCls

于 2015-10-16T21:32:23.150 に答える