Q&A
どこかでエラーになっていますか？
Buttonで、ページ内のインラインフレームのページ内容を替えたり、別タブでページを開いたり、エクセルデータを開きたいのですが、
Chromeは動くのですが、IE（11）では、「イントラネットサイトを互換表示で表示する」のチェックを外さないと動きません。
恐れ入りますが、IEでも互換表示設定を変えずに動かす方法ご教示下さい。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>練習</title> <script type="text/javascript"> <!-- function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; } } function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } // --> </script> <base target="topmenue" /> <style type="text/css"> .style2 { color: #0000FF; font-size: xx-small; text-align: right; font-family: Verdana; } .style3 { text-align: right; font-family: Verdana; } .style4 { font-family: Verdana; } .style5 { text-align: center; } .style6 { color: #FFFFFF; font-size: x-small; font-family: Verdana; } .style7 { font-size: xx-small; text-align: right; } .style8 { font-size: xx-small; text-align: right; font-family: "MS UI Gothic"; } .auto-style2 { color: #D3E51F; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: x-large; background-color: #1F65E5; } .auto-style15 { margin-right: 0px; margin-top: 98px; } .style28 { font-size: x-large; font-family: メイリオ; } .auto-style22 { font-family: メイリオ; } .auto-style29 { font-size:x-large; font-family: メイリオ; } .auto-style35 { margin-top: 98px; } .auto-style36 { color: #0D2CF1; font-weight: bold; font-size: xx-large; } .auto-style37 { color: #0000FF; font-size: small; font-family: "Meiryo UI"; } </style> </head> <body style="width: 755px; height: 90px; margin-bottom: 4px;"> <div id="レイヤー1" style="position: absolute; width: 100px; height: 40px; left: 10px; top: 60px; "> <a href="〇〇.xlsx"> <button type="button" name="bottan1" value="code" style="width: 100px; height: 40px;">お掃除<br>当番表</br></button></a></div> <div id="レイヤー2" style="position: absolute; width: 100px; height: 40px; left: 115px; top: 60px; "> <a href="http://○○.htm"> <button type="button" name="button2" value="code" style="width: 100px; height: 40px;">交流会</button></a></div> <div id="レイヤー3" style="position: absolute; width: 100px; height: 40px; left: 220px; top: 60px"> <a target="_blank" href="http://○○.mht"> <button type="button" name="button3" value="code" style="height: 40px; width: 100px">2019年度<br>活動一覧</br></button></a></div> <div id="レイヤー4" style="position: absolute; width: 100px; height: 40px; left: 325px; top: 60px; "> <a target="_blank" href="http://○○.xlsx"> <button type="button" name="motton4" value="code" style="width: 100px; height: 40px;">検索<br>（全て）</br></button></a></div> <div id="レイヤー5" style="position: absolute; width: 100px; height: 40px; left: 430px; top: 60px"> <a target="topmenue" href="http://○○.htm"> <button type="button" name="button5" value="code" style="width: 100px; height: 40px;">お掃除の手引き<br>(フォームなど)</br></button></a></div> <div id="レイヤー6" style="position: absolute; width: 100px; height: 40px; left: 535px; top: 60px; "> <a target="topmenue" href="http://○○.pdf"> <button type="button" name="button6" value="code" style="width: 100px; height: 40px;">トラブル<br>シューティング</br></button></a></div> <div id="レイヤー7" style="position: absolute; width: 100px; height: 40px; left: 640px; top: 60px"> <a target="topmenue" href="○○.htm"> <button type="button" name="button7" value="code" style="width: 100px; height: 40px;">トップに戻る</button></a></div> <table style="width: 700px; height: 1100px;" class="auto-style35"> <tr> <td style="height: 440px; width: 3px;"></td> <td valign="top" style="height: 440px; width: 700px;"> <iframe name="topmenue" id="I2" style="width: 700px; height: 1100px" src="http://home.hirata.co.jp/gihou/new-index-top_1908.htm" marginwidth="1" marginheight="1" target="_blank" class="auto-style15" scrolling="yes"> お使いのブラウザはインラインフレームをサポートしていないか、またはインラインフレームを表示しないように設定されています。</iframe></td></tr> <table=topics> <td> </table=topics><br/></td> </table> </body> </html>
早速回答ありがとうございます。
エラーは出なく、ボタン押しても反応しません。ちなみに、普通に動くページでは、ボタンにカーソル合わせると、URLが画面下に表示されますが、当該ページではURLが表示されません。
回答1件
0
ベストアンサー
IE8互換モードで再現しました。
いまさら互換表示で動かさなければならないのはつらいのですが。
・方法1 アンカーのみで表示
button 要素を外し、a へのスタイルでボタンのように見せる方法です。
IE8 相当の表現ではどうしても差が出てしまうかと思います。
CSS
1 display: inline-block; 2 padding: 1px 6px; 3 border: 2px outset buttonFace; 4 text-align: center; 5 font-size: 12px; 6 text-decoration: none; 7 background-color: ButtonFace; 8 color: ButtonText;
・方法2 form
アンカーを外し、代わりに form 要素にします。button の属性も見直してください。
HTML
1<form action="hoge.html" target="topmenue"> 2 <button style="width: 100px; height: 40px;">トラブル<br>シューティング</button> 3</form>
投稿2019/09/30 09:16
総合スコア13749
互換モードでも IE9 以上では再現しなかったため、meta 追加のみで対応できるかもしれません。
https://teratail.com/questions/90828
回答ありがとうございます。
今出先なので、後日アドバイスを元に挑戦してご連絡差し上げます。
遅くなりました。
方法2に関しては、解決できませんでした。
方法2にて動作できました。
ありがとうございました。
あなたの回答
tips
プレビュー
