IEでテキストが選択できない?

ここのブログのテーマを作っているときに、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:


    サイト内検索

    プロフィール

  • 顔絵
  • kotani(こたに)

    30台後半になって突然脱サラ。フリーのスクリプト系プログラマーとして独立を目論む謎のおやぢ。東京都在住。趣味は古本屋巡り、文具いぢり、機械いぢり、B級グルメ探索等々多岐にわたる。PCを使う作業に関しては何でもかんでも自動化したがる自動化オタク。