ブログTOP > CSS/XHTML > IE6で「max-width」を使って、自動改行されない文字列を制御する

2008年05月11日

IE6で「max-width」を使って、自動改行されない文字列を制御する

このブログのクロスブラウザ対応にいくつか問題があったので、修正しました。
致命的だったのは、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
「Windowsとは なかなか断絶できない〜」のページをIE6で見てるけど、右端飛び出してましたよ??
Posted by 通りすがり at 2008年06月09日 15:47
コメントありがとうございます。

こちらの環境(WinXP SP2、IE6.0.2900.2180)では問題ないのですが、
もしかしたらマイナーバージョンの違いでしょうか??
Windows2000のIE6を使ってるなんてことはないですか?
一応そのへんは確認する必要なしと考えているんですが。

あるいはデータのダウンロードがきちんと終了してないとか、JSが有効になってないとか。
再読み込みしたらなおったりしませんかね。

bodyのレンダリングが完了した時点でJSでwidth調節するという仕組みなので。
Posted by taichistereo at 2008年06月09日 22:01
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
カテゴリクラウド
トップページへ戻る
Blog Widget by LinkWithin