- 相關(guān)推薦
關(guān)于容器定位的CSS教程
很神奇的一個(gè)晚上，居然在以前老同事的群里跟同事討論起CSS的東西來(lái)了，不過(guò)很意外的還是有收獲。在IE中常常會(huì)碰到如果將容器定位后，出現(xiàn)容器內(nèi)的文字不可選擇（測(cè)試的時(shí)候主要用帶連接的文字）。
xhtml結(jié)構(gòu)：
定位后無(wú)法選擇容器的內(nèi)容解決方案
css樣式：
div {
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1px solid red
}
HTML代碼：
運(yùn)行代碼框
div {position:absolute;top:100px;left:100px;width:200px;height:200px;border:1px solid red}
定位后無(wú)法選擇容器的內(nèi)容解決方案
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
請(qǐng)?jiān)贗E中測(cè)試上面的代碼，你會(huì)發(fā)現(xiàn)文字是無(wú)法選擇的。
當(dāng)時(shí)我想到的方法是在定位后無(wú)法選擇容器的內(nèi)容解決方案后面加上一個(gè) 空格來(lái)引發(fā)這個(gè)選擇，不過(guò)這樣的話就多了一個(gè)字符，不是很好。
然后想到了在藍(lán)色理想論壇中的一個(gè)帖子里有提到這個(gè)問(wèn)題，在“[教程] web標(biāo)準(zhǔn)常見(jiàn)問(wèn)題集合[不斷更新]”這個(gè)帖子的第五個(gè)問(wèn)題提到的解決方法是
引用內(nèi)容
上面的問(wèn)題在IE6、7中存在，解決問(wèn)題的辦法是讓IE進(jìn)入到quirks mode。關(guān)于quirks mode的相關(guān)知識(shí)，請(qǐng)參考：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好像依然存在問(wèn)題，加了背景色依然無(wú)效。接著測(cè)試中。。。
但根據(jù)aoao說(shuō)的在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在問(wèn)題，加了背景色依然無(wú)效。，但我在IE6綠色版中測(cè)試后可行，IE7中也可以，如果哪位朋友是用這個(gè)版本的IE6的可以試一下
HTML代碼：
運(yùn)行代碼框
div {position:absolute;top:100px;left:100px;width:200px;height:200px;border:1px solid red;background:#FFFFFF;}
定位后無(wú)法選擇容器的內(nèi)容解決方案
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
至于讓使用IE的怪異模式的話，測(cè)試過(guò)，可行，但這樣的話，就是對(duì)盒模型計(jì)算方式就不一樣了，如果不習(xí)慣用怪異模式的同學(xué)要考慮一下。
后來(lái)，老同事“表哥”發(fā)了一個(gè)網(wǎng)址，是老外的，上面介紹的方法是通過(guò)
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
后來(lái)測(cè)試，只要保留height:100%就可以了。
HTML代碼：
運(yùn)行代碼框
html, body {height:100%;}div {position:absolute;top:100px;left:100px;width:200px;height:200px;border:1px solid red;}
定位后無(wú)法選擇容器的內(nèi)容解決方案
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
【容器定位的CSS教程】相關(guān)文章：
css教程07-22
css經(jīng)典教程07-18
（優(yōu)）css教程07-21
（必備）css教程07-25
【熱】css教程07-24
css經(jīng)典教程[集合]07-30
css教程13篇[必備]07-20
css教程精品(13篇)07-23