Movable Type で作成した記事の内容をマウスで選択できないという現象

IE と position:absolute;

ある場所で見たやり取りを自分なりにメモします。 どうやら、 Movable Type で作成した記事の内容をマウスで選択できないという現象が存在するようです。 ( TricksteR: おっぱいボーン！！ ) しかし私が確認したときは現象が再現しなかったので、常用している Firefox 0.9 ではなく、 IE 6.0 で確認してみると、確かに質問された方のサイトの Individual Entry Archive の内容が選択できません。

最初に IE 6.0 で確認していたらうーむと悩んでしまったかもしれませんが、既に Firefox で再現しないことを確認していたため、 IE の CSS バグが怪しいなと思いました。 そこで検索してみると、 IE 6.0 では position: absolute; が指定されたブロック内のテキストを選択できない現象が発生する、といったことが分かりました。 ( あまりに類似の記事が多かったため、検索結果のみを示します。 Google 検索: IE 選択 テキスト position absolute )

要するに、 Movable Type が原因の問題ではなく、前述の通り IE の CSS バグが原因の問題です。 position: absolute; の指定をしない CSS にすれば解決するようですが、 Movable Type のデフォルトのスタイルシート ( style-site.css ) では position: absolute; を使用しているため、 Movable Type で構築しているサイトをブラウジング中にこういった現象に遭うことが多いかもしれません。

サイトの制作者に改善をお願いするのも解決策の一つですが、改善までにタイムラグが生じてしまいますし、簡単に position: absolute; の指定を外すことができるスタイルであるとは限りません。 それに、 IE 6.0 のバグに由来する現象ですので、対応をしてくれないかもしれません。 ( 仮に私がこの現象に遭遇しても、 IE のバグに関するものは放置すると思います。 )

CSS のバグが原因であるので、仮に制作者側が対応しなくても ( あるいはできなくても ) 、閲覧者側で CSS の適用を解除すれば問題は解決します。 しかし、 IE の機能の中に CSS の解除というものはありませんので、 Bookmarklet などを別途使用する必要があります。 あるいは、 IE 以外のブラウザを使用するのも良い解決策でしょう。 ( IE 6.0 でしか発生しない現象なのですから。 ) もしくは、一度 Ctrl + A で全文選択してメモ帳やエディタなどにコピー & ペーストし、必要な部分だけを再度コピーするという方法でも良いでしょう。

なお、 CSS の適用を解除する Bookmarklet について別項にまとめています。 IE で CSS を解除する Bookmarklet を合わせて参照してください。

トラックバック送信先

• TricksteR: ちょっとだけ。