IEでテキストが選択できない?
2008/03/29
ここのブログのテーマを作っているときに、IEでのみテキストの選択がうまくいかないという現象に遭遇しました。
原因を調べてみたところ、どうやらスタイルシートのPosition:absoluteで位置指定した要素ではIEのテキスト選択がうまくいかないらしい。これまでも見る側としてはこのような現象は知っていたのですが、作る側としては3段組のサイトを作成した今回が初めて出会った現象でした。
これを解決するもっとも簡単な方法としては、テキスト選択される可能性の高いメインコンテンツ部分はmarginで位置指定をし、テキスト選択する可能性が低いと思われるサイドバー部分をPosition:absoluteで位置指定します。
例えばここのブログではこんな感じです(必要部分のみ抽出)
CSS:
#content {
width:900px;
margin:auto;
position:relative;
}
#header {
height:99px;
}
#main{
width:540px;
margin-left:170px;
margin-top:100px;
}
#sidebar {
width:170px;
position:absolute;
left:0px;
top:100px;
}
#sidebar2 {
width:170px;
position:absolute;
left:730px;
top:100px;
}
HTML:
<div id="content">
<div id="header">
ヘッダ
</div>
<div id="main">
メイン
</div>
<div id="sidebar">
右サイドバー
</div>
<div id="sidebar2">
左サイドバー
</div>
</div>
tableタグでレイアウトしていた頃に比べると、CSSでのレイアウトは非常に理に適ってはいるのですが、このようなブラウザ間の差異には結構泣かされます。
コメントする
トラックバックする
トラックバック用URL: