CSS: December 2008アーカイブ
InternetExplorerでは、position: fixedが使えないので、フッターやヘッダーを固定するレイアウトにする場合は、IE6に対策が必要です。
ただし、ヘッダーやサイドバーなど、上から一定座標に配置する場合は、position: absoluteを使ってクリアすることができますが、フッターのように、ブラウザ内の下にくっつけて配置したい場合はなかなかうまくいきません。
いろいろとネットで検索するうちに、1つのJavascriptを読込むだけでposition: fixedが有効になるものを発見しました。
doxdesk.com: software: fixed.js
http://www.doxdesk.com/software/js/fixed.html
これを導入してみましたが、残念ながら、IE6でスクロールした際に若干ピクついた挙動をします。
最終手段では、高さ100%のFlashエリアとして入れて、Flash内で下にくっつかせたらどんなに簡単に処理できるだろうと考えています。
もう一つ参考になるサイトがありました。
http://gyauza.egoism.jp/clip/archives/2008/03/080302-ie6positionfixed/
ただし、ヘッダーやサイドバーなど、上から一定座標に配置する場合は、position: absoluteを使ってクリアすることができますが、フッターのように、ブラウザ内の下にくっつけて配置したい場合はなかなかうまくいきません。
いろいろとネットで検索するうちに、1つのJavascriptを読込むだけでposition: fixedが有効になるものを発見しました。
doxdesk.com: software: fixed.js
http://www.doxdesk.com/software/js/fixed.html
これを導入してみましたが、残念ながら、IE6でスクロールした際に若干ピクついた挙動をします。
最終手段では、高さ100%のFlashエリアとして入れて、Flash内で下にくっつかせたらどんなに簡単に処理できるだろうと考えています。
もう一つ参考になるサイトがありました。
http://gyauza.egoism.jp/clip/archives/2008/03/080302-ie6positionfixed/
Flash内にブログなどを引っ張ってくる際に、XMLをMTに吐き出させてそれをFlashへ引っ張ってくると、なかなかアップするクライアントが臨機応変にリンクや画像や動画埋め込みなどを行うことができないので、最近はiframeを使って入れる方法を使っています。
ただし、iframe内は通常のhtmlコンテンツになるため、ブラウザ間の表示の相違が問題になってきます。
今回ハマってしまったのは、またしても忌まわしいIEの横スクロールバー。
iframe内に入るコンテンツは、CSSでガチガチにwidthを指定してありますが、長さはスクロールが必要な長さでした。
なので、当然縦スクロールのみが出るのが当たり前と思いきや、なぜだかIEのみに横スクロールまで出てしまいます。
iframe内のwidthや、読込む親htmlのiframeタグのwidthをいじってみましたが、なかなか直らず。
調べてみると、結論は
「IEは縦が長くてスクロールが必要な場合、横も出てしまう」
みたいです。
だからIEなんかなくなればいいのに！って言ったのに
となると、解決策は下のようにしました。
//CSS//////////////////////////////////////////////////////////////////
(iframe内に入れるhtmlファイルのcssに記述)
html {
overflow-x: hidden;
}
Web制作の仕事をしていると、必ずぶち当たるIEの壁。
CSSでは違った解釈をいろんなところで引き起こしてくれるし、IE6までは.pngの透明画像もそのままは扱えず、ややこしくしてくれちゃうし。。。
そのくせ今でもIE6のシェアが高かったりして。
この際、IE6に致命的なバグが発見されて、毎日テレビのニュースで「古いIEを使っている人は、すぐにIE7に移行しましょう」ぐらいなことがおこらないかと毎日期待してますが、そんなこともなく。
といつもの壁をまたしても感じている今日、発見してしまいました。
IE6だけ落ちる仕掛けが！
しかも簡単に作れる！
驚くほど簡単です。
こんな1行で落ちてしまうIEってどんだけ弱いのかと哀れになってしまうほどです。
ネタ元はこちら
http://d.hatena.ne.jp/Hamachiya2/20070804/browser_crasher
//HTML//////////////////////////////////////////////////////////////////
CSSでは違った解釈をいろんなところで引き起こしてくれるし、IE6までは.pngの透明画像もそのままは扱えず、ややこしくしてくれちゃうし。。。
そのくせ今でもIE6のシェアが高かったりして。
この際、IE6に致命的なバグが発見されて、毎日テレビのニュースで「古いIEを使っている人は、すぐにIE7に移行しましょう」ぐらいなことがおこらないかと毎日期待してますが、そんなこともなく。
といつもの壁をまたしても感じている今日、発見してしまいました。
IE6だけ落ちる仕掛けが！
しかも簡単に作れる！
驚くほど簡単です。
こんな1行で落ちてしまうIEってどんだけ弱いのかと哀れになってしまうほどです。
ネタ元はこちら
http://d.hatena.ne.jp/Hamachiya2/20070804/browser_crasher
//HTML//////////////////////////////////////////////////////////////////
<style>*{position:relative}</style><table><input></table>
