Movable Type 備忘録

 

 IE6 で min-width、max-width を実装する２

こんにちわ^^

先日、IE6 で min-width、max-width を実装するで、モダンブラウザで対応されている min-width / max-width を、IE6.x でも抑制する方法をご紹介しました。

今日、youmosさんとお話し(コメントで･･･)たら、もっとスマートな方法があるとのことでした。
しかも、すぐに記事にしてもらえてとっても嬉しいのココロ (●´∀｀●)
参考：ieFixed HTC - min-width max-widthをIE6で利用する

で、さっそく youmos さんの記事を参考にやってみまたところ、カンタンに IE6.x の横幅を抑制することができました。
高さも同様に抑制することができます。

わたしのサイトでは、高さについては特に制約はないのでコメントにして、横幅のみの適用です。

注意点

youmos さんのところでも明記されてますが、behavior プロパティで指定する HTC ファイルの URL は必ず入れた方が良さそうです。

わたしのサイトの CSS のディレクトリ構成は以下のようになってます。

http://bizcaz.com/
  +-- index.php          <-- トップページ
  +-- styles-site.css    <-- メインのスタイルシート
  |
  +-- mt-memo/
  |     +-- foryou009/
  |     |     +-- iefixed.htc        <-- HTC ファイル
  |     |     +-- 3column-liquid.css <-- この CSS 内に behavior プロパティ追加
  |     |

上記に示すように、3column-liquid.css というファイルがレイアウトを定義している CSS になります。
このファイル内に以下のように behavior プロパティを追加しました。

3column-liquid.css

  1. body.layout-three-column-liquid-leftbody #container {
  2.     width: 90%;
  3.     behavior: url(http://bizcaz.com/mt-memo/foryou009/iefixed.htc);
  4.     max-width: 1280px;
  5. }

青い字で記したように、HTC ファイル(iefixed.htc)の URL を指定しないと、なぜか思った動作しませんでした (´Д｀；)
URL を指定したからってディレクトリ構成を変えない限り支障があるわけでもないし、ということで OK にしちゃいました (;￣∇￣A

また、横幅および、高さの最大値、最小値は CSS 内の min-width / max-width、min-height / max-height で指定した値を読込んで適用してくれていました。
またまた、最小値／最大値は必ず 'px' で指定しないとダメです。

以上です。
youmos さんありがとうございます (m;_ _)mペコ

  • Edit
  • Permalink
  • Comments(0)
  • Trackbacks(0)

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

コメント用フィード