このブログのクロスブラウザ対応にいくつか問題があったので、修正しました。
致命的だったのは、URLなどの英数字の文字列が長すぎて自動で改行されない場合に
・Firefox -> エリアを突き抜けて文字列が表示されるが、その他のレイアウトに影響はない
・IE6 -> 文字列の長さに合わせてエリアが伸びてしまい、サイドエリアが下に回り込む
というものでした。
ブログ以外のサイトではあまり気にすることのない問題でしたが、ブログのマークアップ上はありがちの状況でしょう。。。
解決方法として、
max-widthを指定してやることがまず思いつきます。
同時に、
IE6ではmax-widthが解釈されないというおなじみの仕様のことも思い出します。
このシチュエーションで、僕は「minmax.js」というライブラリを用いることにしました。
doxdesk.com: software: minmax.jsこのライブラリを読み込んでおくことで、IE6でも自由にmax-height、max-widthプロパティを使用することができます。
一方、よくある
* html #container {
width:expression(document.body.clientWidth < 600? “600px” :
document.body.clientWidth > 1200? “1200px” : “auto”);
}
（
IE6でmin-width,max-widthを実装する：CSS | Tech de Go より。他にも
・
[CSS]IEで、min-widthやmax-widthを実現する方法・
CSSとJavaScriptでmin-width max-width を実装する - youmos など）
のようなmax-widthの実現方法というのは、今回の場合役には立ちません。
clientWidthを基準にして数値を一定の範囲に丸めてしまうという方法ですから、ブロックのレイアウト時にしか使用できません。
今回は、ページ中に
不規則に何度も現れる要素のmax-widthを指定したいわけです。
さらに言えば、自動改行されない文字列というのはイコール「リンク付きの」URL文字列なので、aタグ、つまり
文中のインライン要素にのみ適用させればよいわけです。
というわけで、実際のコード。
<head>中で
<script type="text/javascript" src="minmax.js"></script>
とかいう風にパスを指定してminmax.jsライブラリをロードして、
CSSでは
*html div.blogEntry p.honbun a {
over-flow: hidden;
max-width: 450px;
}
のように定義します。
これで、長過ぎるリンク文字列をエリアの右端できれいに非表示にすることが出来ます。
もちろんリンク自体がおかしくなることはありません。
あくまで見た目上、長過ぎるところを隠しただけ。
で、実際にこのブログに反映させています。
こちらのエントリで実際にその結果が確認できます。
■
Windowsとは なかなか断絶できない :: [コエカタマリン MX 2007] (2008年05月04日)
minmax.jsを使えば、CSS内でexpression文を書いたりしないで済むのでラクチンですね。
おためしあれ。
# ちなみに、このブログのCSSは他にもちょこちょこ手をいれておきました。
# 前より微妙に見やすくなったかと思いますが、いかが？
posted by taichistereo at 07:08
|
Comment(2)
|
CSS/XHTML
