ひろぽっぽれす

こんちゃす。海外のCSSデザインを見ていたら、text-indent: -9999px; とは違う画像置換方法を見つけました。（既出かも）

旧式では、CSS側で、text-indent: -9999px; などと指定して、テキストを飛ばして、バックグラウンドに画像を指定する下記のようなテクニックを使います。

text-indent: -9999px を使ったテクニック

(X)HTML側

<div><a href="#"><span>テキスト</span></a></div>

---

CSS側

div a {
	display: block;
	width: 45px;
	height: 45px;
	background: url(images/bg_off.gif) no-repeat 0 0;
	text-indent: -9999px; /*ここでテキストを飛ばす*/
}
div a:hover {
	background: url(images/bg_on.gif) no-repeat 0 0;
}

しかし、これでは、キーボードでのタブ移動の際に選択がわかりにくくなって、アクセシビリティ的によくないとのことから、display: none; を使った画像置換テクニックもあります。

display: none; を使った画像置換テクニック

(X)HTML側

<div><a href="#"><span>テキスト</span></a></div>

---

CSS側

div a {
	display: block;
	width: 45px;
	height: 45px;
	background: url(images/bg_off.gif) no-repeat 0 0;
}
div a:hover {
	background: url(images/bg_on.gif) no-repeat 0 0;
}
div span {
	display: none; /*テキストを表示させない。*/
}

* （ユニバーサルセレクタ）ですべてのフォントサイズを100%に
して、そこからタグごとの指定をするのが定石です。

* {
      font-size: 100%;
}
p {
      font-size: 80%;
}

この記述をハックを使用して記述するとこうなります。

body {
      font-size: 12px; /*モダンブラウザ*/
      _font-size: x-small; /*IE*/
}

でもこのハックはIE7では有効ではなくて、font-size: 12px; で
絶対指定することになってしまいます。
なので、「*（アスタリスク）ハック」を使用します。

body {
      font-size: 12px; /* モダンブラウザ */
      *font-size: small; /* IE 7 */
      *font: x-small; /* IE 6以下 */
}

ショートハンドのfont プロパティには、font-sizeとfont-familyの値が
必須となります。なので、3行目の技術は不正なプロパティとなり、
仕様に準拠しているブラウザでは無視され、IEだけ読み込んでしまいます（笑）

で、これらの文法違反をクリアしようとするとこうなります。

body {
      font-size: small !important; /* IE 7向け */
      font-size: x-small; /* IE 6以下 */
}
html>/**/body {
      font-size: 13px; /* モダンブラウザ向け */
}

FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字（長いURLや半角空白のないスクリプト等）を途中で折り返せない
という既知のバグがあります。

【前提：連続する半角英数字が改行されない】
通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、折り返さない場合が多いです。

つまり、

>”aaaaaaaaaaaaaaaaaaaaaaaaa”はコンピュータからみれば一つの単語で、途中に改行が入ることが許されません。

ということです。

参考資料：
・半角文字列の折り返し（ブラウザ毎の比較があります）
http://pinotan.blog15.fc2.com/file/word-break.html

【通常の対処方法】

1. htmlタグbrで強制改行。
2. はみ出し部分をCSS（overflow:hidden)で切り落とす。（IE6は親ボックスの幅が広がるバグがあるので、widthで直接的に幅を指定しないと効かない)
3. CSSにword-break:break-allを指定し、IEだけ右端で改行。（ボックス幅の広がりを防げるが、単語区切りにならず英数字が読み辛い)
4. CSSにword-break:keep-allを指定し、IEだけ右端で改行。（単語区切りのみで改行。区切りが無いと全角でも改行されない)
5. 区切り記号を全角にする。（稀に折り返さないケースもある)
6. 半角記号を空白(スペース)で挟む。
7. 単語の区切りなどに<wbr>(<wbr />)を入れる。

参考資料：
7以外は以下の引用です
http://pinotan.blog15.fc2.com/blog-entry-106.html

Firefoxの場合、折り返すようにする拡張機能（url_breaker、url_breker_plusもしくはGreaseMonkeyを使う方法）があります

ただ、この場合、ユーザーにインストールしてもらわないといけないので、入れていない人にも効かせて欲しい場合は、これをjs化することで対応できます。

参考資料：
Firefox・Netscapeで連続した半角文字を折り返す
http://www.koikikukan.com/archives/2005/08/04-235647.php

NN7やmozillaでは、なんと全角数字も同じように扱われてしまいます。
しかし記号もそうなのだとは知りませんでした。
参考ページ。
http://www.mozilla.gr.jp/forums/?mode=al2&namber=6847&rev=&&KLOG=47

こんちゃす。ぴです。
自分、funnythingzというWeb屋の集まり集団の代表やってます。

その公式サイトでもあるhttp:/www.funnythingz.com/なんですが、 今日久しぶりにソースレベルでの更新を行いました。どうってことないのですが、Web標準を謳っている割にクロスブラウザにちゃんと対応していなかったので、(X)HTML部分とCSSを改修しました。

これで、IE7,でもIE6以下でもFirefoxでも、Opera9でも、Netscape7.1でも、Safari3でもレイアウト崩れしてないんだぜ！というのを大きくアピールできます。（誰にｗｗｗｗｗｗｗｗ）

といっても、中身のないサイトなんであまり意味ないんですけどね。

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}