IE8とIE11（エンタープライズモード）での disabled の色の差異

2018/02/09 05:45

IE11のエンタープライズモード＋互換表示でも、表示はスクリーンショットのとおり変わりませんでした。

defghi1977

2018/02/09 07:44

OS側のテーマを変えるってのは駄目でしたっけ？ハイコントラストモードとか

2018/02/09 08:22

ありがとうございます。Windows10にはこんな機能もあるんですね。IE11エンタープライズモードのdisabledのinput欄の背景色も見事に白になり、コントラストが上がりました。デフォルトで見にくいというユーザにはこちらを案内するというのもよい方法ですね。

行動規範の内容に同意します

回答2件

ベストアンサー

属性セレクタはIE7からあるので、次の記述はききませんか？

CSS
1input[disabled] {
2    border-style: solid;
3    border-color: #aaa;
4    background: #fff;
5}

-- 17:50 追記
JScriptで何とかしてみます

JavaScript
1if (window.attachEvent) {
2  // for IE5-9
3  window.attachEvent('onload', function(event) {
4    var inputs = document.getElementsByTagName('input');
5    for (var i = 0; i < inputs.length; i++) {
6      var input = inputs[i];
7      if (input.getAttribute('disabled')) {
8        input.className += ' disabled';
9      }
10    }
11  });
12}

CSS
1input[disabled],
2input.disabled {
3    border-style: solid;
4    border-color: #aaa;
5    background-color: #fff;
6}

投稿2018/02/09 04:50

編集2018/02/09 08:53

総合スコア13749

2018/02/09 05:59

残念ながら、この記述は効きませんでした。参考までに、IE8側でも効きません。なお、[F12]を押すと出てくる開発者ツールで見ると、IE11側ではドキュメントモード欄が "5" 、IE8側では "Quirks" になっています。私の理解では、HTML に <DOCTYPE> タグがないため、IE5相当のQuirksモードで動いている（ので、input[disabled] セレクタも効かない）ものと考えています。

yy_tn

2018/02/09 06:30

IE5モードになっているとのことなのでmetaタグで「X-UA-Compatible」でIE7指定にしてみてはどうでしょうか。

2018/02/09 06:41

HTML4のDOCTYPE宣言もないということですか？

2018/02/09 06:44

yuya_tnさん metaタグや、アプリケーションサーバの機能でHTMLヘッダに X-UA-Compatible を指定すると当該CSSは動きますが、いろいろと他の挙動も異なってくるため、画面のレイアウトが(ページによっては大きく）狂ってしまうのです。現状だと、レイアウトの崩れや誤動作はなくうまく動きます。大きな問題はこのdisabledの色だけなんですが・・・

2018/02/09 06:45

x_xさん現状は、全くないです。本文に書いたような感じのHTMLです。（何しろ古いシステムなので・・・）

2018/02/09 06:59

IE5ではCSSだけで何とかするのは絶望的です。 https://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx せめてHTMLに手を入れられないのでしょうか？

2018/02/09 07:25

やはりそうですか・・・ HTMLに手を入れてはいけないわけではないのですが、HTML（JSP）ファイルは400ファイルほどあり、手間の問題から難しいと思っています。

2018/02/09 07:48

すべてのページで読み込んでいるJavaScriptファイルはないでしょうか？

2018/02/09 08:25

ほとんど全てのページで読み込んでいる外部JavaScriptはあります。ここに何か書くというのも可能です。なお、外部CSSファイルもあります。

https://docs.microsoft.com/ja-jp/internet-explorer/ie11-deploy-guide/what-is-enterprise-mode

2018/02/16 05:13

JavaScriptサンプルありがとうございます。これなら一括でクラスが追加できますね。ただ、動的にdisabledのON/OFFを切り替えているページが多く（参照と編集を同一ページでやっている作りになっています）、改修量が多くなりそうなので、今回は「何も対処しない」ことになりました。

行動規範の内容に同意します

IE11 のエンタープライズモードは、
「どのサイトはどのバージョンのIEとして表示する」
を指定できます。

に沿って、ドキュメントモードを 8 になるように各クライアントを設定する（グループポリシーの設定）のはどうでしょうか。

投稿2018/02/09 06:36

総合スコア13703

2018/02/09 07:06

サイト一覧の xml ファイルを、 <site url="localhost:8080"> <compat-mode>IE8Enterprise</compat-mode> <open-in>IE11</open-in> </site> から、 <site url="localhost:8080"> <compat-mode>IE8</compat-mode> <open-in>IE11</open-in> </site> に変えるということですね。やってみましたが、確かにCSSは効くようになりますが、残念ながら画面のレイアウトが(ページによっては大きく）狂ってしまいます。（metaタグの X-UA-Compatible で IE=8 や IE=7 を指定した時と同じです）

2018/02/09 07:31

https://docs.microsoft.com/ja-jp/internet-explorer/ie11-deploy-guide/fix-compat-issues-with-doc-modes-and-enterprise-mode-site-list こちらを参考に、エミュレーションでうまく行くのを見つけられるでしょうか。

2018/02/09 07:42

レイアウトが崩れるページで、[F12 開発者ツール]を実行してエミュレーションツールでドキュメントモードを変えてみると、11～7ではすべてNGで、結局 5 でない限りはレイアウトが崩れます。

2018/02/09 08:19

ということは、もともと IE8でも「IE6 互換」か何かでブラウズしてたのでしょうね。

2018/02/09 08:24

はい、そうです。本物のIE8でも [F12]で見ると、ドキュメントモードは "Quirks" になっています。（IE5互換とのこと）

2018/02/09 08:34

IE5 と IE6 とで、大きく影響するのがコンテンツの width と height の指定です。 https://msdn.microsoft.com/library/bb250395.aspx IE5 だと border と padding を「含む」のです。IE6 以降や CSS 準拠のモデルでは含みませんから、この基本的なところでサイズが崩れる要因となります。これを踏まえて CSS を書き直し、デザインを崩さないしかないかもしれません。