2009年05月09日

IE6での行分割面の縦枠線と要素幅の不具合

利用側の問題ではないので根本的な対処となると不可と思われますが不具合の内容をまとめておきます。

IE6では、インライン要素にプロパティborderで枠線を設定した場合に改行の前後で縦線が入ります。もじら組のWeb標準普及プロジェクトのWeb標準化Tipsに解説があります。ブロックレベル要素とインライン要素の項目5から6付近が該当記事となります。

ibbrk.png

表幅はセレクタtableのプロパティでwidth:98%と指定しているため、ボックス幅(全体の幅)は文字数などの内容で表毎に可変とはならずに親要素の要素幅(内容を置ける幅)に対する比率で統一されます。

要素幅にプロパティborderpaddingの値を加える仕様がIEのボックスモデルです。独自仕様で押し通したとしても要素幅の定義を無為にするため実質的には欠陥です。

加算分は内容を置けない領域ですが通常は子要素で指定が無ければバグ仕様の要素幅を最大利用するので不適合状態となります。幅設定の比率指定では水増しされた値が基準となるのでバグ加算分が大きい場合に高比率を取ると不適合状態となります。

wtie6.png

余白設定などクラス属性.renew-marginでの指定で独自にスタイルコンテナとしている要素div配下に表を置くと表幅は直接の親要素divの要素幅(内容を置ける幅)を参照することになります。表幅の設定によりdivの要素幅の98%に表全体が収まるはずです。

wmfx3.png

IE6では親要素が変わっても子要素となる表幅を対応させず親要素の要素幅を強制的に拡張するため、上位の親要素の設定が無意味となります。先の要素幅バグ加算でも同様の処理で目先の不適合を解消しています。

bmie6.png

よく見ると以前に取り上げた表内の文字色だけでなく文字種や大きさでも継承無視で強制設定されています。要素幅に限らず全般的に優先関係の大黒柱となる継承が出鱈目で、根幹部分の理解不足と思わせるほどの不出来です。

OSとIEが渾然一体であるため通常の使用ではスタイルシートを無効にできません。それほどCSS規格に全面依存しながら安易な処理動作を押し通す造りに、市場の寡占からくる驕(おご)りが見て取れます。



posted by 台場一 at 16:10 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2009年05月10日

小規模スタイル変更とサイド部分の『最近の記事』の表示改変

実際は既に適用済みのスタイル変更をまとめます。記事領域で主に使用するブロックレベル要素の枠色や余白等を調整する内容で小規模な変更です。

引用の枠色を変更します。引用要素は既にセレクタとなっています。引用blockquoteのプロパティborderの色設定を変更し、新たにプロパティoverflow:autoを追加します。

スタイルコンテナ用の設定を変更します。独自設定のクラス属性.renew-marginで指定しているプロパティmarginの値とbackground-colorborderの色設定を変更します。

テーブルの色形式を変更します。セレクタtablethtdのプロパティborderで枠と仕切り線の色設定を変更し、セレクタthにプロパティbackground-colorを追加してセルの項目部分の背景色を新規設定します。

サイド部分にある『最近の記事』の書式を変更して年表示と曜日を加えます。SeesaaのコンテンツHTML編集で、日付の書式を指定するSeesaa関数date_formatの引数を変更します。

改行を加えて記事タイトルと分けて表示するよう、関数部分をdate_format("%Y-%m-%d %a") %>:<br />に差し替えます。日付部分はW3C形式の表記にします。

posted by 台場一 at 00:16 | Comment(0) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。