プロフィール

kosaki

Author:kosaki
連絡先はコチラ

ブログ検索
最近の記事
最近のコメント
最近のトラックバック
リンク
カテゴリー
月別アーカイブ
RSSフィード
FC2ブログランキング

スポンサーサイト このエントリーをはてなブックマークに追加

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)

ページの横幅を可変にしてみた その2 このエントリーをはてなブックマークに追加

むう、昨日やったページの横幅を間にする処理が大失敗で、IE以外ではマトモに見れなくなっていた orz

IEのCSSバグ紹介ページとかCSSによる段組レイアウトの紹介ページとかを見ながらハックハックハック!!

CSSってブラウザの互換性問題で、作法が超複雑になっているというのが良く分かった。
マジしんどいっす。


どうも float: leftなdivが2つあって、以下のようにスタイル指定されていた場合、

<div id="div_a" style="float:left; width150px">
</div>
<div id="div_b" style="float:left">
</div>

正しい解釈はdiv_bの横幅の計算でdiv_aのことを考えずに(だってdiv_aはfloatだから)横幅を計算して、結果的に幅100%になって、
あらら、div_a と div_b 足したら親要素の横幅超えるじゃん。
だから、div_bはdiv_aの下に回りこむ。
という事になるらしいのだが、IEはfloatの計算がてきとーらしい。
φ(.. )メモメモ


てゆーか、「見た目を気にしないから」という怠惰(プログラマの美徳の1つ)な理由でwidth削っただけなので、その後始末で何十倍もの時間をとられるとは是如何に?

バグがあると、つい真っ当な形で修正したくなってしまうのはある種の職業病だよなぁ・・・
とかとか。

ところで、IEで見たときのみ、1番目の記事のタイトルだけまだオカシイんだけど、誰か理由教えてくれないかしら??


追記: そして、今度は印刷プレビューがめちゃくちゃに。うがががが




関連記事


blog | 【2006-10-17(Tue) 03:44:54】 | Trackback:(0) | Comments:(9)
コメント

w3cのサイトでhtmlとcssの妥当性をちぇきしてみそ。
あと原因はもじら組フォーラムで検索かけると分かると思うよ。

ってか、こさっきーがこんなことで・・・( ̄ー ̄)

ieは色々適当だからねぇ・・・
独自仕様も多いから、ieの表示だけでは信用できねぇずら( ̄ー ̄)y━・~~~
2006-10-16 月 17:37:15 | URL | mink #- [ 編集]

ちなみに、よこっちょの記事一覧やトラックバック一覧が FireFoxだとクリックできません。ふぁいとっ、であります。
2006-10-16 月 22:04:02 | URL | KAME #- [ 編集]

そうそう。クリックできなくなっちゃいました。Firefox 1.5.0.5
2006-10-17 火 03:48:07 | URL | hyoshiok #OLXj00Ls [ 編集]

うわーーん ヽ(;´Д`)ノ
今日はひまがないので、いったん違うテンプレートに退避デスヨー。
根本的な対策はあとで考えよう
2006-10-17 火 04:42:21 | URL | kosaki #- [ 編集]

根本的にfloatで組むのがあかんねん。
http://d.hatena.ne.jp/rna/20050813/p1
2006-10-23 月 16:54:22 | URL | rna #i0SzwAZI [ 編集]

僕みたいなblogライトユーザーは、最初のデフォルト・blogテンプレートをあんまり変えなくて、
かつ、イマドキのテンプレートはほぼ全てfloat段組だと思いますので、もう手遅れですじゃ(><
2006-10-23 月 19:55:10 | URL | kosaki #- [ 編集]
このコメントは管理人のみ閲覧できます
2007-09-02 日 06:08:09 | | # [ 編集]
このコメントは管理人のみ閲覧できます
2007-10-19 金 13:58:39 | | # [ 編集]
このコメントは管理人のみ閲覧できます
2007-12-20 木 11:45:08 | | # [ 編集]
  1. 無料アクセス解析
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。