質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

2回答

5373閲覧

IE11でwebアプリの表示が崩れる

---stax---

総合スコア148

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/01/29 05:29

編集2019/01/29 05:46

現在webアプリを作成しております。
開発に使用していたブラウザはMozilla Firefox64です。
CSSフレームワークにはbulmaを使用しています。

ある程度形になってきてFirefox上での表示や動作確認が出来たのでIE11でも確認してみたところ大幅にレイアウトが崩れていました。
bulmaも一部反映されていない部分があります。
ブラウザのデバッグモードで確認してもエラーは出ていませんでした。

対応策を調べてみたところ以下のコードを記述することで解決した例が挙げられていたので試してみましたが変化はしませんでした

html

1<meta http-equiv="X-UA-Compatible" content="IE=edge>

IEのデバッグモードでバージョン?をIE9にすると少しだけ改善されます。
元はChromeやFireFoxのみで使用予定だったこともありbulmaも併せて勉強したかったので使用していたのですが、急きょIEにも対応しなければいけなくなった際にこのようなレイアウトが崩れてしまう場合は諦めてIEにも完全に対応している他のフレームワークやライブラリを使うしかないのでしょうか?
またデバッグでエラーがでていないからライブラリに問題があるのかと考えているのですが他に確認するべき個所はありますでしょうか?
かなり初歩的な質問で申し訳ないのですがこのような場合の考え方を教えていただけたら嬉しいです。

以下htmlです
ライブラリなどはローカルに落として使っています
Node-Redと連動しているのでJS、CSSは{{{js.javascript}}}、{{{css.cssfile}}}のように読み込んでいます
一部名称などは伏せています
またhtmlの書き方もひどい部分があると思いますが宜しくお願い致します

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 5 <meta charset="utf-8"> 6 <title>*****</title> 7 <link rel="stylesheet" href="./static/bulma.min.css"> 8 <link rel="stylesheet" href="./static/all.min.css"> 9 <link rel="stylesheet" href="./static/noto.css"> 10 <link rel="stylesheet" href="./static/iconfont/material-icons.css"> 11 <link rel="stylesheet" href="./static/flatpickr.min.css"> 12 <link rel="stylesheet" href="./static/dark.css"> 13 <script src="./static/flatpickr.js"></script> 14 <script src="./static/japanese.js"></script> 15 <script src="./static/moment.min.js"></script> 16 <script src="./static/jquery-3.3.1.js"></script> 17</head> 18<body> 19 <div class="hero" style="background-color: rgb(112, 112, 218)"> 20 <div class="hero-body"> 21 <div class="container"> 22 <h1 class="title" style="color: white">*****</h1> 23 </div> 24 </div> 25 </div> 26 <main class="columns"> 27 <div class="submenu column is-8" style="outline-color: #DCC2FF"> 28 <aside class="box" style='font-size: 25px;'>*****</aside> 29 </div> 30 </main> 31 <div class="tile is-ancestor"> 32 <div class="tile is-vertical is-8"> 33 <div class="tile"> 34 <div class="tile is-parent is-vertical"> 35 <article class="tile is-child notification is-light"> 36 <div> 37 <p class="title">*****</p> 38 <div class="select is-link"> 39 <form name="select"> 40 <select id="tablename2" onInput="viewselect2(this)"></select> 41 </form> 42 </div> 43 <br> 44 <br> 45 <p class="title">*****/*****</p> 46 <input class="flatpickr" id="pickr" type="text" placeholder="*****" readonly="readonly" pattern="^[0-9A-Za-z]+$" title="直接入力する際は半角数字で入力してください"> ~ 47 <input class="flatpickr" id="pickr2" type="text" placeholder="*****" readonly="readonly" pattern="^[0-9A-Za-z]+$" title="直接入力する際は半角数字で入力してください"> 48 <br> 49 <br> 50 <p class="title">*****</p> 51 <div> 52 <table id="datatable" class="table is-bordered is-hoverable is-fullwidth"> 53 <thead> 54 <tr class="is-selected" style="background-color: rgb(112, 112, 218)"> 55 <th>*****</th> <th>**********</th> 56 </tr> 57 </thead> 58 <tbody id="tablebody"> 59 60 </tbody> 61 </table> 62 </div> 63 <br> 64 <br> 65 <div id="fileDateSelect"> 66 <p class="title">*****</p> 67 <input class="flatpickr" id="pickrFileDate" type="text" placeholder="*****" readonly="readonly" pattern="^[0-9A-Za-z]+$"> 68 </div> 69 <br> 70 <div class="output_button"> 71 <div class="control"> 72 <form method='POST' id='myform1'><input class="button is-link is-outlined is-large" type='submit' value='*****'/></form> 73 </div> 74 <div id="area1"></div> 75 </div> 76 </div> 77 </article> 78 </div> 79 </div> 80 </div> 81 </div> 82 <sub class="columns"> 83 <div class="submenu column is-12" style="outline-color: #DCC2FF"> 84 <aside class="box" style='font-size: 25px;'> 85 ***** 86 </aside> 87 </div> 88 </sub> 89 <div class="tile is-ancestor"> 90 <div class="tile is-vertical is-12"> 91 <div class="tile"> 92 <div class="tile is-parent is-vertical"> 93 <article class="tile is-child notification is-light"> 94 <p class="title">*****</p> 95 <div class="select is-link"> 96 <form name="select" id="csvSelect"> 97 <select id="tablename" onChange="viewselect(this)" onload="viewselect(this)"></select> 98 </form> 99 </div> 100 <div class="control"> 101 <button class="button is-link is-outlined is-hovered is-large" onClick="diray()">*****</button> 102 </div> 103 <div id="area3"></div> 104 </article> 105 </div> 106 </div> 107 </div> 108 </div> 109 <script> 110 {{{js.javascript}}} 111 </script> 112 <style> 113 {{{css.cssfile}}} 114 </style> 115</body> 116</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuapricot

2019/01/29 05:32

長々と書かれても肝心なことが書かれておらず・・・ コードがなければ再現しようもないですし 答えも想像になっちゃいます。 CSSなどご自身のコードを提示することはできませんか?
---stax---

2019/01/29 05:48

ご指摘ありがとうございます 内容追記致しました JSは公開できない量なのとCSSには数行のボタンの色を変えたりする部分だけなのでHTMLだけになりますが記載させて頂きました
guest

回答2

0

Bulmaは、IEについては部分的なサポートにとどまる、とのことです(README)。

実際問題として、BulmaはFlexboxをベースにしたフレームワークですが、IEは11ですらそのFlexboxがバグだらけという惨状(Can I use)なので、よほど知り尽くして手を打てなければ、IE11で正しく運用するのは困難かと思われます。

投稿2019/01/29 05:38

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

---stax---

2019/01/29 05:54

回答ありがとうございます。 やはり作り直しが早そうですね。 次回からは全部カバーできるライブラリを調べて使用したいと思います。
guest

0

ベストアンサー

https://github.com/jgthms/bulma#browser-support

Browser Support

Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Internet Explorer (10+) is only partially supported.

意訳: IE10+は部分的にちょっとだけ動きます

何故使い始める前にサポートブラウザを確認しなかったのだ……

世の中的にはもうIE11はオワコンなので対応していないライブラリが非常に多いです。
サポートするかしないかはまずきっぱりと決めて、それからライブラリの選定作業を行ってください。

急きょIEにも対応しなければいけなくなった

IE11の安請け合いだけは絶対にしないで下さい。
これは言語問わずバージョンや環境を勝手に変える全ての作業に共通しますが、IE対応だけはマジでヤバいです。

今回の例のようにレイアウトはぐしゃぐしゃは当然ですし、
ひどい時にはJSも動かん、代替ライブラリは無しでフロントエンド全リテイクみたいな事もあります。
まずは分かってない上司や経営陣達に説明しましょう。

要は出来もしないのに「うん」と言うなということです。
自社の既存サイトがあるならGAを使ってIE11ユーザの比率を確認してもらいましょう。
また、IE11対応用の開発期間や予算をもぎ取ってください。

これを知らなかったり、怠っていたのならご愁傷様としか言いようがありません。
頑張って残業なりをして進捗の回復運転を行うか、今すぐ上司に泣きついてください。

際にこのようなレイアウトが崩れてしまう場合は諦めてIEにも完全に対応している他のフレームワークやライブラリを使うしかないのでしょうか?

そのCSSフレームワークの裏をどれだけ読みましたか?
IE11流儀の書き方でどれだけエミュレートできますか?

同じライブラリでゴリ押しするのは、そういう世界になります。
一朝一夕でやるにはまるで時間が足りませんし、どんだけの技術力を要求されるんだという話でしょう。
(作者もIE11対応出来る人プルリクエスト投げてほしいなぁなんて言ってる有様です)

勿体無いですが、IE11でやらざるを得ない場合、ライブラリごと捨てた方が話が早いです。
もしくはバージョン2でIE11対応する約束だけして、今回はIE11対応しないとか…

<meta http-equiv="X-UA-Compatible" content="IE=edge>

ダブルクォート閉じ忘れて変になってないですか?

https://teratail.com/questions/29809
この質問で解説されているように、IE11にはレンダリングedgeモードというのはあります。
しかし、IE11の裏側のエンジンがedgeと呼ばれる同姓同名なだけで、
ブラウザのEdgeの挙動になるわけではないようです。

なので解決する可能性としてはあまり高くなさそうです。

投稿2019/01/29 05:35

編集2019/01/29 06:11
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/01/29 05:39

「急きょIEにも対応しなければいけなくなった」そうなので、ご愁傷さまな部分もありますよね……
---stax---

2019/01/29 06:11

上が決定したことなのですが素人なりにIEは出来ることが限られていると感覚的に分かるので作り直しは覚悟しました。 今後は「まずは分かってない上司や経営陣達に説明しましょう。」でおっしゃられるように他人になぜできないかをあらかじめしっかり説明できる力も必要だと感じました。 ダブルクォートのご指摘もありがとうございます(追記した内容には/もついていますがそれも修正しています) 修正しましたが変化なしでした。
miyabi-sun

2019/01/29 06:20

まずは急遽対応、ご愁傷さまです。 それに合わせて解答欄をこちょこちょと加筆・修正対応しました。 経営層も人間なので知ってる領域が増えるに従って言ってる事もコロコロ変わります。 でもまぁ、その意思決定の変更によるリスクを計算したり経営陣に伝え交渉する役目は、 本来は上司が負うべきです。 この辺が社会で行きていく上でさじ加減が難しいのですが、頑張ってください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問