- ベストアンサー
他のブラウザでも表示できるように調整する方法
- IEではうまく行くのですが他のブラウザでも表示できるようにするための調整方法を教えてください。
- 質問者は特定のブラウザ（IE）では問題なく表示されるが、他のブラウザでは表示されないという問題に直面しています。どのように調整すれば問題を解消できるのか、ご教示ください。
- 質問者は特定のブラウザ（IE）で表示できるコードを作成しましたが、他のブラウザではうまく表示できません。どのような調整が必要なのか、ご教示いただけますか？
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは ＞■Netscapeはレイアウトか崩れてしまいました。 ネスケは持っていなかったのでNetScape7.1をダウンロードして見てみましたが特に崩れていないようでしたが？ [動作環境] IE6.0、Firefox2.0、Opera9.0、NetScape7.1 >それとも何かほかに方法があるでしょうか。 ※ #1からの変更点 ・class="hidden"の<div>の追加 ・↑にあわせてtitle idの変更、width,heightの微調整 ・fixedcolsの背景色をセルの背景色に ・javascriptのid名の変更 ・onscroll()の自動セット 残りは書き直していますがほぼ一緒 ※Operaのみheightの感覚が違うのでtitleとmainの間にズレがありますが残りは同じになっています <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>table 連動スクロール</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=shit_jis"> <script type="text/javascript"><!-- window.onload=function() { document.getElementById("maincols").onscroll = function(){ fnc_scroll(); } } function fnc_scroll(){ document.getElementById('fixedcols').scrollTop=document.getElementById('maincols').scrollTop; document.getElementById('title_b').scrollLeft=document.getElementById('maincols').scrollLeft; } //--></script> <style type="text/css"><!-- .hidden { overflow:hidden; float:left; } .auto { overflow:auto; float:left; } #titles { height:27px; } #mains { width:27px; } #title_a { width:27px; } #title_a table { width:30px; } #title_a td , #title_b td { background-color:silver; } #title_b { width:132px; height:50px; } #title_b table , #maincols table { width:150px; table-layout:fixed; } #fixedcols { width:50px; height:63px; } #fixedcols table { width:30px; } #fixedcols table td { background-color:#ffffcc; } #maincols { width:150px; height:80px; } #maincols div { width:151px; } .cl { clear:both; } --></style> </head> <body> <div> <div id="titles" class="hidden"> <div id="title_a" class="hidden"> <table border="1"> <tr><td>A</td></tr> </table> </div> <div id="title_b" class="auto"> <table border="1"> <tr><td>C</td><td>D</td><td>E</td></tr> </table> </div> </div> <div class="cl"></div> <!--本体部分--> <div id="mains" class="hidden"> <div id="fixedcols" class="auto"> <table border="1"> <tr><td>F</td></tr> <tr><td>K</td></tr> <tr><td>P</td></tr> <tr><td>U</td></tr> </table> </div> </div> <div id="maincols" class="auto"> <div> <table border="1"> <tr><td>H</td><td>I</td><td>J</td></tr> <tr><td>M</td><td>N</td><td>O</td></tr> <tr><td>R</td><td>S</td><td>T</td></tr> <tr><td>W</td><td>X</td><td>Y</td></tr> </table> </div> </div> <div class="cl"></div> </div> </body> </html>
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ＞IEではうまくいくのですが・・・ サンプルではIEでもうまくできていないと思うのですが？ とりあえず一個ずつ言うと ・<span>(インライン要素）の中に<table>(ブロック要素）は入れられません(文法上ＮＧです） ・<span>はインライン要素なのでwidth,heightの指定はできません(強制的に(display:block;によって）ブロック要素にしているなら別です) ・overflow-x,overflow-yはIE独自のものなので他のブラウザでは使えないことがあります ・bgcolorは非推奨になっていますのでスタイルシートの使い方を知っているのであればそちらを代用してください ・document.allはIEとか使用できるブラウザが特定されますので汎用的に使用するのであればdocument.getElementById("")などを使用する癖を付けてください 修正して試したところid="maincols"をスクロールさせたら 横スクロール → id="title"連動横スクロール 縦スクロール → id="fixedcols"連動縦スクロール になりましたがこの仕様です？ <div style="width:50px;float:left;"> <table border="1" style="width:100%;"> <tr style="background-color:silver;"><td>A</td></tr> </table> </div> <div id="title" style="overflow:auto;width:132px;height:50px;float:left;"> <table border="1" style="width:150px;"> <tr style="background-color:silver;"><td>C</td><td>D</td><td>E</td></tr> </table> </div> <div style="clear:both;"></div> <!--本体部分--> <div id="fixedcols" style="overflow:auto;width:50px;height:63px;float:left;"> <table border="1" style="width:30px;background-color:#ffffcc;"> <tr><td>F</td></tr> <tr><td>K</td></tr> <tr><td>P</td></tr> <tr><td>U</td></tr> </table> </div> <div id="maincols" style="overflow:auto;width:150px;height:80px;float:left;" onscroll="fnc_scroll()"> <div style="width:151px;"> <table border="1" style="table-layout:fixed;width:150px;"> <tr><td>H</td><td>I</td><td>J</td></tr> <tr><td>M</td><td>N</td><td>O</td></tr> <tr><td>R</td><td>S</td><td>T</td></tr> <tr><td>W</td><td>X</td><td>Y</td></tr> </table> </div> </div> <div style="clear:both;"></div> <script type="text/javascript"> <!-- function fnc_scroll(){ document.getElementById('fixedcols').scrollTop=document.getElementById('maincols').scrollTop; document.getElementById('title').scrollLeft=document.getElementById('maincols').scrollLeft; } --> </script> ※<div style="width:151px;">は<div style="width:150px"><table style="width:150px;">ではOperaでスクロールが出ないので付け加えているだけです ※分かるようにタグに直接styleをつけていますがタグに直接書かないスタイルシートの使い方を覚えるとid="fixedcols"のtableもセルだけに色をつけることも可能ですよ（＾＾） 多分<tr>に何個もつけるのが面倒(?)なのでtableに色をつけてると思うので・・・ <style type="text/css"><!-- #fixedcols table td { background-color:#ffffcc; } --></style> こんな感じで
補足
ご回答ありがとうございます。 適切なご指摘でとても参考になりました。 説明不足で申し訳ありません。 IE以外にはNetscapeとFirefoxができればと思っています。 ■Netscapeはレイアウトか崩れてしまいました。 これはfloat:leftを修正すればよろしいのでしょうか。 ■IE以外ですと"title"部分でも横スクロールバーが出てしまいますが、 これはz-indexで上から重ねるなどすればよいのでしょうか。 それとも何かほかに方法があるでしょうか。 もしお助けいただけるようでしたらよろしくお願いいたします。
お礼
お手数お掛けしました。 本当に助かりました。 Netscapeは依然としてA/B/C/D/Eの表題が 表から外れて左に来てしまいますが、 Firefoxがうまくいっているので大満足です。 ありがとうございました。 後ほどポイントをつけさせていただきます。