2006/12/10(日)[CSS] W3C規定とIE6の内容部分の計算の違い

adiary::テーマ

W3Cで規定されている内容部分の計算

下記の色つき部分がwidthで計算されます。

margin

border

padding

contents

contents部分の幅はwidthで指定した値となります。

contents部分の幅 = widthの値

heightも同様です。

IE6の内容部分の計算

下記の色つき部分がwidthで計算されます。

margin

border

padding

contents

よって、IE6の場合はcontents部分の幅は

contents部分の幅 = widthの値 - paddingの値 - borderの値

となります。heightも同様です。

paddingがwidthに含まれることは知っていましたがborderまで含まれるとは思いませんでした。

コメント（0件）

2006/12/08(金)拡張リスト記法のテスト

adiary

ソース

-
-項目1
項目1の説明
-項目2
--項目2.1
>>
項目2.1の説明
<<
-項目3


-
-項目1

項目1の説明
-項目2
項目2の説明
-項目3
項目3の説明1

項目3の説明2

項目3の説明3
項目3の説明3のつづき

出力結果

  • 項目1
    項目1の説明
  • 項目2
    • 項目2.1

      項目2.1の説明

  • 項目3

  • 項目1

項目1の説明

  • 項目2

項目2の説明

  • 項目3

項目3の説明1

項目3の説明2

項目3の説明3
項目3の説明3のつづき

感想

標準（空行で改行処理。そのまま改行）モードだと上記のようになるっぽい。自分としてはリスト中で改行か段落処理かを切り替えるには

  • 項目中で空行挿入→直後の行を段落処理
  • 項目中で改行挿入→改行部分で改行処理(<br>挿入)

がこのパーサーの場合直感的に使える気がする。

-
-項目1

項目1の説明
-項目2
項目2の説明
-項目3
項目3の説明1

項目3の説明2

項目3の説明3
項目3の説明3のつづき

で以下のようなHTMLが出力される方が良かったのだが。

<ul>
<li>項目1
<p>項目1の説明</p></li>
<li>項目2<br>
項目2の説明</li>
<li>項目3<br>項目3の説明1
<p>項目3の説明2</p>
<p>項目3の説明3<br>項目3の説明3のつづき</p></li>
</ul>

出力結果としてはこんな感じ。

  • 項目1

    項目1の説明

  • 項目2
    項目2の説明
  • 項目3
    項目3の説明1

    項目3の説明2

    項目3の説明3
    項目3の説明3のつづき

コメント（2件）

2006/12/06(水)テーマを変更しました

adiary::テーマ

作成中のテーマがとりあえず閲覧には困らない程度には出来上がったので変更しました。
Firefox/Operaでの閲覧を激しく推奨、IEでの閲覧を激しく非推奨((いや、もちろんIEでもそれなりに表示できるようには作りましたが、かなりの部分で処理が簡略化されています。
何よりもお姉さまになれません（爆）))。

システムモードとかカレンダーの部分はやっつけで調整に時間がかかりそう。このあたりがちゃんとできれば公開するつもりです。

コメント（7件）