定位后無法選擇容器內(nèi)容解決方案

文章來源：365jz.com 點擊數(shù)：389 更新時間：2008-08-02 22:24 參與評論

很神奇的一個晚上，居然在以前老同事的群里跟同事討論起CSS的東西來了，不過很意外的還是有收獲。在IE中常常會碰到如果將容器定位后，出現(xiàn)容器內(nèi)的文字不可選擇（測試的時候主要用帶連接的文字）。

xhtml結(jié)構(gòu)：

<div>
<a href="#">定位后無法選擇容器的內(nèi)容解決方案</a>
</div>

css樣式：

div {
    position:absolute;
    top:100px;
    left:100px;
    width:200px;
    height:200px;
    border:1px solid red
    }

HTML代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Linxz" />
<style type="text/css">
div {
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1px solid red
}
</style>
<title>定位后無法選擇容器的內(nèi)容解決方案</title>
</head>

<body>
<div>
<a href="#">定位后無法選擇容器的內(nèi)容解決方案</a>
</div>
</body>
</html>

請在IE中測試上面的代碼，你會發(fā)現(xiàn)文字是無法選擇的。

當時我想到的方法是在<a href="#">定位后無法選擇容器的內(nèi)容解決方案</a>后面加上一個空格來引發(fā)這個選擇，不過這樣的話就多了一個字符，不是很好。

然后想到了在藍色理想論壇中的一個帖子里有提到這個問題，在“[教程] web標準常見問題集合[不斷更新]”這個帖子的第五個問題提到的解決方法是

引用內(nèi)容
上面的問題在IE6、7中存在，解決問題的辦法是讓IE進入到quirks mode。關(guān)于quirks mode的相關(guān)知識，請參考：http://www.microsoft.com/china/msdn/library/webservices/asp.net/
ASPNETusStan.mspx?mfr=true
aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在問題，加了背景色依然無效。接著測試中。。。

但根據(jù)aoao說的在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在問題，加了背景色依然無效。，但我在IE6綠色版中測試后可行，IE7中也可以，如果哪位朋友是用這個版本的IE6的可以試一下

HTML代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Linxz" />
<style type="text/css">
div {
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1px solid red;
background:#FFFFFF;
}
</style>
<title>定位后無法選擇容器的內(nèi)容解決方案</title>
</head>

<body>
<div>
<a href="#">定位后無法選擇容器的內(nèi)容解決方案</a>
</div>
</body>
</html>

至于讓使用IE的怪異模式的話，測試過，可行，但這樣的話，就是對盒模型計算方式就不一樣了，如果不習慣用怪異模式的同學(xué)要考慮一下。

后來，老同事“表哥”發(fā)了一個網(wǎng)址，是老外的，上面介紹的方法是通過

html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
}

來解決問題
參考：http://www.webmasterworld.com/forum83/6565.htm

后來測試，只要保留height:100%就可以了。

HTML代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Linxz" />
<style type="text/css">
html, body {height:100%;}
div {
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1px solid red;
}
</style>
<title>定位后無法選擇容器的內(nèi)容解決方案</title>
</head>