選択できないテキスト

CSSで、『position:absolute』を指定した場合、
その要素の中のテキストを選択できないことがあるそうです。

今まで何度か不思議に思っていたんですが、
直しようもないしなーと思いつつ、放置していました。
しかし、先ほど、コメントへの返事を書こうとしたときにその不便さを実感。
引用できないじゃん…

で、原因を探るべく検索してみたら、
hxxk.jpさんの記事がヒットしたというわけ。

hxxk.jp – Movable Type で作成した記事の内容をマウスで選択できないという現象
IE 6.0 では position: absolute; が指定されたブロック内のテキストを選択できない現象が発生することがあります。そして、 Movable Type のデフォルトのスタイルシート ( style-site.css ) では position: absolute; を使用しているので、たびたびその現象が発生しているようです。そういった場合の対処法をいくつか考察。

このエントリでは、特別解決策が示されているわけではありませんが、
解決への十分なヒントを得られたので、試してみることに。
要は、positionの部分をコメントアウトすればいいわけだな。

最初に、MovableTypeのデフォルトCSSを疑ってみましたが、
僕はMovableTypeのデフォルトCSSは使用してないし、
ブラウザ毎の仕様差を埋めるべく設定してあるデフォルトCSSにも設定がない。

…と思ったら、全ページ共通のCSSファイル（基本構造などが規定されている）に、
そう言う部分がありました。
しかしねぇ、これ、ページのパーツを全体的に真ん中に寄せるための、
かなり重要度の高い部分なので、おいそれとは変更できない…
が、これを解除してみたところ、選択可能に。

ちなみに、その、真ん中寄せのCSSはこんな感じ。

div#Container　　{
　　width:750px;
　　position: absolute;
　　left: 50%;
　　margin-left: -375px;
　　text-align:left;
}

仕方がないので、positionを削除し、
真ん中に寄せるのを他のパーツに頼ることに。

でもこれだと、Geckoでは真ん中に寄らないんだよな…（汗）

そういう訳なので、IE以外のブラウザのみ、
positionを適用するようにさらにハック。

完成形はこんな感じ。

body　　{
　　text-align:center;
}
div#Container　　{
　　width:750px;
/* position: absolute; */
　　left: 50%;
/* margin-left: -375px; */
}
html>body div#Container　　{
　　position: absolute;
　　margin-left: -375px;
}