現在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>
回答2件
あなたの回答
tips
プレビュー