メイン

2006年01月09日

WinIE5x対策で「w\idth」

WinIE5x対策で「w\idth」

Default
MovableType3.2のデフォルトCSS

.archive-header { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto;

margin: 0;
border-left: 5px solid #36414d;
padding: 5px;
color: #fff;
background: #a3b8cc;
font-size: 11px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}

ie5x
IE5対策してる部分を取ってみた。正直、よくわからん。レイアウトのタイプによっては「width:100%」がずれる場面があるんだろうか。

.archive-header
{
width: 100%
margin: 0;
border-left: 5px solid #36414d;
padding: 5px;
color: #fff;
background: #a3b8cc;
font-size: 11px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}

2006年01月08日

レイアウト用のfloat等をCSSでクリアするためのpkg

IE6配置ずれバグ対策:できる!CSSを使いこなす

Default
MovableType3.2のデフォルトCSS

/* .pkg class wraps enclosing block element around inner floated elements */

.pkg:after
{
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
* html .pkg { display: inline-block; }
/* no ie mac \*/
* html .pkg { height: 1%; }
.pkg { display: block; }
/* */

pkg部分を修正
.pkgでどんなハックを施しているか、わかりやすく色をつけたりしてみた。各ブラウザごとに確認してみて。

/* .pkg class wraps enclosing block element around inner floated elements */
.pkg:after
{
content: "hoge hoge hoge hoge";
}
* html .pkg { display: block; background: #f00;}
/* no ie mac \*/
* html .pkg { height: 1%; background: #0f0;}
.pkg { display: block; background: #00f;}
/* */