186(Panda)

2004-07-07

[] widthの値 03:26

ちょっと纏めてみよう

今のはてなのhtmlによると

MacIE
quirk
MacSafari
?
Gecko
standard?
Opera6
standard?
Opera7
standard?
WinIE
quirk

という風になるのかな。

で、widthの解釈は

MacIE
?
MacSafari
?
Gecko
Opera6
Opera7
×(padding,margin,borderも含む)
WinIE
×(padding,margin,borderも含む)

という風になる筈だ。

で、正しく計算する為にOpera7とWinIE5+にのみ嫌々間違ったwidthを指定しないといけない。どういう風にCSSを書けばよいのだろうか。

で、Alternate Box Model Hackによると

<セレクタ>

{

/* もしあれば、ボーダとパッディングを指定する */

width: <内容の幅 + パッディング + ボーダの幅>;

width/* */:/**/<内容の幅>;

width: /**/<内容の幅>;

/* 他の宣言はこの規則内のどこに現れても良い */

}

*

でWinIE5.xとMacIE5は対応出来るらしいのだが、WinIE6とOpera7には通用しない。

_width:を入れればWinIE6は対応。

この際DOCTYPE宣言をStrictにすれば丸く収まるのだけれども色々とhtmlの方に問題が出てくる訳で。

[] 変なの 02:24

面倒臭がりなのでURIだけ。

MacIE5.x系にまつわるフォント指定の罠だそうです。

[] やばいかも 02:06

WinIE5.x media属性を含むlink要素で呼び出した外部スタイルシートでは@mediaを無視

http://cssbug.at.infoseek.co.jp/detail/winie/b144.html

Smoking_whiteとSmoking_blackって@media print {}を作っていた様な……。

[] あ。 01:12

themeグループについてによると2004年7月・8月の2ヶ月を、「はてなダイアリーデザイン強化月間」と位置付けますだそうですが、私7月8月は院試があるので忙しかったり。

お手伝いとして色んなところからCSS hackの資料でも集めることにします。で、テーマを書けたら書くと。

[] 01:08

CSSグループの方にも書いたかな。

<style>

body {

background:url(im.png);

margin:0px;

padding:10px;

}

div.test {

margin:0px;

padding:10px;

border:40px solid #0000ff;

width:200px;

background-color:#ffffff;

}

</style>

<body>

<div class="test">test test</div>

<img src="test.png" width="300" height="100"gt;

</body>

極端な話IEの互換モードと標準モードには上の様な差が出る訳で。それを_hack使って対応するのも面倒な話で。

MacIE5.0には@media{}等を使ったhackがあるのでそれはそれで何とかなったような気がしますよ。

上の様な解釈→IE標準,Gecko系,Opera6系,Safari?

下の様な解釈→IE互換,Opera7系

で、CSSグループの方で気付いたんですが、キーワードページ等で

hatena.cssがposition:relativeを使っている為、テキストの選択等がブラウザ側のバグの所為か出来ません。positionが効いてくるのはIEだけなんで_position:relativeにするとWin利用者ではGecko組とOpera組が幸せになれます。