Crimson Report

<< 研究者と助手 | Φは壊れたね >>


スポンサーサイト

Fri 18 11, 2005

Permalink : http://sug.jugem.cc/?eid=

一定期間更新がないため広告を表示しています

| posted at | filed under - | - | - |

Latest entry


擬フレの基礎論【3】

Thu 04 11, 2004

Permalink : http://sug.jugem.cc/?eid=158

position: fixed用のCSSとposition: absolute用のCSSがそれぞれ出来上がった。あとは#menu(たとえばメニュー部分)の記述のダブりを、対応非対応のブラウザにそれぞれ振り分ける。今回でようやく基礎工事は終わりです。

とりあえず手持ちのブラウザでposition: fixedの対応状況を調べてみる。

  • × Internet Explorer 6
  • ○ Mozilla Firefox 0.9
  • ○ Mozilla ver 1.5
  • ○ Netscape 7.0
  • ○ Opera 6

みな微妙に古いバージョンだが、ユーザの大部分は網羅していると思われる。(1年ほど前に解析をしたデータで書いている。かなり厚顔だが)上記のことからIEとその他に振り分けを行えばよいことがわかる。噂ではIE7はposition: fixedに対応するとかしないとか(どっちだ?)

前回の(問題点の多い)擬似フレームではIE独自タグで振り分けた。

<head>
<!--[if IE]>
<style type="text/css">
/* IEだけに適用させたいCSSコード */
</style>
<![endif]-->
</head>

今回はIEのCSS解釈のバグを利用した要素の上書き方法、holly Hack というのを使ってみる。IE独自タグがHTML内でしか使えないのに対して、CSSの中に記述できるところが便利。

[ CSS ] (クロスブラウザ)

html {
padding: 0; margin: 0;
}
body {
padding: 0; margin: 0;
}
#menu {
display: block;
position: fixed /* ボックス位置固定 */
top: XXpx; left: XXpx;
width: XXpx; height: XXpx;
}
/* ここからIE用に上書きする。上書きするプロパティ以外は継承される */
* html {
overflow: hidden; /* スクロールさせない */
}
* html body {
height: 100%; /* 高さを指定 */
overflow: auto; /* あふれた場合はスクロール */
}
* html #menu {
position: absolute;
}

焦点を絞ってサンプルを書き換えました。

赤い背景のタイトル部分が固定ボックスです。position のtop、left をそれぞれ0にして、width を100%にすれば縦分割の擬似フレームに、heightを100%にすれば横分割の擬似フレームになります。

以下次号

関連記事

| posted at 19:57 | filed under Memo | comments(3) | trackbacks(0) |


スポンサーサイト

Fri 18 11, 2005

Permalink : http://sug.jugem.cc/?eid=

| posted at | filed under - | - | - |


Comments & Trackback

  1. - : 管理者の承認待ちコメントです。

  2. - : 管理者の承認待ちコメントです。

  3. - : 管理者の承認待ちコメントです。


Search this site

about this site

Categories

Archives

Appddix