- 相關推薦
關于容器定位的CSS教程
很神奇的一個晚上，居然在以前老同事的群里跟同事討論起CSS的東西來了，不過很意外的還是有收獲。在IE中常常會碰到如果將容器定位后，出現容器內的文字不可選擇（測試的時候主要用帶連接的文字）。
xhtml結構：
定位后無法選擇容器的內容解決方案
css樣式：
div {
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1px solid red
}
HTML代碼：
運行代碼框
div {position:absolute;top:100px;left:100px;width:200px;height:200px;border:1px solid red}
定位后無法選擇容器的內容解決方案
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運行]
請在IE中測試上面的代碼，你會發現文字是無法選擇的。
當時我想到的方法是在定位后無法選擇容器的內容解決方案后面加上一個 空格來引發這個選擇，不過這樣的話就多了一個字符，不是很好。
然后想到了在藍色理想論壇中的一個帖子里有提到這個問題，在“[教程] web標準常見問題集合[不斷更新]”這個帖子的第五個問題提到的解決方法是
引用內容
上面的問題在IE6、7中存在，解決問題的辦法是讓IE進入到quirks mode。關于quirks mode的相關知識，請參考：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好像依然存在問題，加了背景色依然無效。接著測試中。。。
但根據aoao說的在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在問題，加了背景色依然無效。，但我在IE6綠色版中測試后可行，IE7中也可以，如果哪位朋友是用這個版本的IE6的可以試一下
HTML代碼：
運行代碼框
div {position:absolute;top:100px;left:100px;width:200px;height:200px;border:1px solid red;background:#FFFFFF;}
定位后無法選擇容器的內容解決方案
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運行]
至于讓使用IE的怪異模式的話，測試過，可行，但這樣的話，就是對盒模型計算方式就不一樣了，如果不習慣用怪異模式的同學要考慮一下。
后來，老同事“表哥”發了一個網址，是老外的，上面介紹的方法是通過
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
后來測試，只要保留height:100%就可以了。
HTML代碼：
運行代碼框
html, body {height:100%;}div {position:absolute;top:100px;left:100px;width:200px;height:200px;border:1px solid red;}
定位后無法選擇容器的內容解決方案
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運行]
【容器定位的CSS教程】相關文章：
css屬性定位教程07-23
CSS入門教程01-25
CSS閉合浮動元素教程06-26
CSS選擇器教程06-05
CSS教程之盒模型10-17
集成spring與Web容器教程10-21
關于CSS教程:復合型條狀圖表01-25
CSS基礎教程之背景圖片07-31
CSS-層疊樣式表基礎教程08-10