IE6でのexpressionを使用した要素固定対

2023/08/11 00:33

このQ&Aのポイント

IE6での要素固定時にselect要素が重なってしまうバグの解決方法を教えてください
IE6のexpressionを使用した要素固定時にスクロール要素内のselect要素が表示されない問題に対処する方法を教えてください
IE6でのexpressionを使った要素の固定でスクロール要素とselect要素が重なる問題の解決方法を教えてください

ベストアンサー

IE6でのexpressionを使用した要素固定対

2011/04/13 01:10

--- <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>タイトル</title> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> body{background:#ffffff url(null) fixed;} #fixed{position:absolute;top:expression(eval(document.documentElement.scrollTop+0));background:#ccc;} #fixed{width:100%;height:100px;} </style> </head> <body> <div id="fixed" class="specify"></div> <div id="contents" style="padding:100px 0px 1000px;"> <select> <option selected="selected" value="">選択してください</option> </select> </div> </body> </html> --- 余計な部分を省いていますが上記の内容でIE6用にページ上部に常に表示されるナビを表示しています。そうすると、スクロールする要素内にあるselectが DIV#fixedの上に乗っかってしまいます。このバグを解決する方法をご存じの方、いらっしゃいますでしょうか？今更IE6ですいません。かなり悩んだのですが解決策が見あたらず参っています。

ma0564
お礼率50% (4/8)

HTML
回答数4
ありがとう数1

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2011/04/13 09:29 回答No.1

よくわかってませんが… 検索するとたくさんヒットするので、有名な不具合（仕様らしいけど）みたいです。　http://css-bug.jp/win/ie/ver6/0281/ 対策としては、　1）下になった時に、スクリプトでセレクト要素を非表示にする　2）セレクト要素より上にくる、ダミーのiframeを下敷きにするのどちらかのようです。 http://blog.shimazu.org/archives/10 http://kurusugawa.jp/2008/05/16/ie6%e3%81%a7select%e3%82%a8%e3%83%ac%e3%83%a1%e3%83%b3%e3%83%88%e3%81%aez-index%e3%81%8c%e7%84%a1%e8%a6%96%e3%81%95%e3%82%8c%e3%82%8b%e3%83%90%e3%82%b0/ http://kaelab.ranadesign.com/blog/2009/06/ie6selectz-index.html http://blog.fkoji.com/2006/09161340.html http://www.programming-magic.com/20071107222415/

質問者

お礼 2011/04/19 23:33

返答が遅くなって申し訳ありません。回答ありがとうございました！教えていただいた方法で何とか対応ができました！やっぱりIE6はいろいろとすごいんですね。。。。

その他の回答 (3)

abacabu
ベストアンサー率37% (250/663)

2011/04/19 15:26 回答No.4

趣味でＷＥＢサイトを作っている者です。なかなか閉めない様ですので少し書きます。まずしっかりとＸＨＴＭＬを正しく記述してください。 metaのLanguageはＸＨＴＭＬには対応しておりません。あとその記述はむしろ<html>内部で良いと思います。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> これが標準だと思います。ＨＴＭＬとちがってＸＨＴＭＬでは誤った記述は許されません。これ治すだけでも少し違うかもしれません。つぎのmetaも訂正しておきます。 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> となります。コピペして頂ければ反映できます。あと#fixedが2個あるのがちょっときになります。これは1つにまとめてよいのでは？まぁごく稀にこう言うのが喧嘩する場合もあった様な気がします… ただ簡易表記で別物なんですかね？私が分かるのはこの位ですのであしからず…

123admin
ベストアンサー率52% (1163/2214)

2011/04/14 11:05 回答No.3

個人的に今更IE6をサポートする行為は承服できないんですが・・・まずMSではIE6はサポート対象外になっています。またこれを受けてポータルサイトでもIE6撲滅運動が展開されました。それでも尚IE6に拘るならオンライン詐欺やWebブラウザのセキュリティ脆弱性を狙った悪さを考えているんかと勘ぐりたくなります。そんな事ないなら勿論NN4.7もサポートされるんでしょうね？「IE6は9年前の腐った牛乳」――Microsoftがアップグレード呼び掛け http://www.itmedia.co.jp/news/articles/1005/17/news033.html やるのなら古いウェブブラウザを利用しているユーザーにアップグレードを促すメッセージを表示させる事だと考えます。ソースはこちらに解説されています。 http://koyatsu.me/web/htmlcss/26/ Win2000とかのユーザーは大方FirefoxなりOperaなりに移行している筈ですので心配する必要はありません。先の方も言っておられるようにIphoneや携帯からのアクセスの方が数量的に多くなる筈です。

tracer
ベストアンサー率41% (255/621)

2011/04/13 20:09 回答No.2

よこやり的な回答で申し訳ないんですが、気になったのが、IE6よりも多いと思われるiPhoneやiPadの閲覧はどうするの？ということです。そもそも要素固定は考えものかもしれませんね。 IE6の解決策としては#1さん以上の回答を思いつきません。しかしながら、IE6の要素固定のためだけの作業と考えると、ものすごく費用対効果の低い作業と思いませんか？

関連するQ&A

ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。下記のソースでhtmlを制作しましたが、#headerの上に余白があります。どうすればこの余白をとる事が出来るでしょうか？お教え頂ければと思います。 ↓ソース↓ <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
Operaでズレない方法をご指導下さい
IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。ブラウザの横幅を大きくしたら小さくしたりすると、ズレない場合もあるのですが、最大にすると1pxだけズレます。ズレない良い方法がありましたら、どうか教えて下さい。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="main">テキスト</div> </body> </html>
- 締切済み
- HTML
HTMLで○や■などをテキストの代用とした時
HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？教えてください。よろしくお願い致します。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css">  </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
CSSの質問です。
親子枠の関係です。親を縦横300px x 300pxと指定した場合、子に縦横300px x 300pxと指定すると親枠からはみ出るんでしょうか？ <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>親子関係</title> <style type="text/css">  </style> </head> <body> <div id="oya"> <div id="kodomo"> </div> </div> </body> </html> 経験者若しくはプロの方のアドバイスを願います。
- ベストアンサー
- HTML
ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css">  </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
DreamWeaverでのスタイルシート適用後のプレビューについて
最近やっとDreamWeaverを購入してテーブルからCSSデザインに乗り換えようと奮闘中のものです。外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 HTMLのほうに、 <!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> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </html> と書きプレビューしてみたのですがスタイルシートが適用されません。デザインビューでは適用されているのですが、、、何が原因なのでしょうか?
- ベストアンサー
- ホームページ作成ソフト
IE6でli間に出来る隙間を無くす方法について
下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、Firefox等では隙間は出来ませんでした。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>
- ベストアンサー
- CSS
Dreamweaverのデサインビューが不便です
web制作の超初心者です。 Dreamweaver CS3をWindows Vistaで使用しているのですが、デザインビューが意図したように表示されず困っています。例えば、divで「back_ground」というボックスの中に、「fixed_box」という「position: fixed;」のボックスを作ったのですが、ブラウザではボックスが固定して表示されるのですが、デザインビューでは表示されず、とても不便です。 DWのデザインビューではボックスを固定して表示できないのでしょうか？、それともタグやその他の設定の仕方に問題があるのでしょうか？（なお、メニューの「表示」→「スタイルレンダリング」の「スタイルを表示」にはチェックが入ってありました。）念のため、以下にコードを載せておきます。どなたかお分かりになる方、どうぞよろしくお願いいたします。 -------------------HTML------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="back_ground"> id "back_ground" の内容がここに入ります <div id="fixed_box"> id "fixed_box" の内容がここに入ります</div> </div> </body> </html> ------------------CSS------------------- #back_ground { background-color: #999999; height: 2000px; width: 1000px; } #fixed_box { background-color: #FF0000; height: 500px; width: 500px; position: fixed; } ----------------------------------------
- ベストアンサー
- HTML
DIV　右寄りにしたい
<!DOCTYPE html "-//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" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css">  </style> </head> <body> <div class="左"> 左 </div> <div class="右"> 右 </div> </body> </html> 上記のコードで、一つのDIVは右寄り、もう一つは左寄りにしたいのですが右寄りの仕方がわかりません。どうやらdivはtext-align:right;では右に寄らないのですがどうすれば右に寄せられますか？右divも左divも同じ位置に左右に表示させたいです。
- ベストアンサー
- HTML
フォントと文字サイズの指定方法
HTML初心者です。どなたか助言ください。以下のソースのようなテンプレHTMLを変更しないといけなくなりました。以下のソース部分のフォントと文字サイズを指定するにはどのようにすればよろしいでしょうか？ <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div> 　　＊＊＊＊以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p> 　　＊＊＊＊ ......同じような内容が続く </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML