CSS教程:容器定位

2024-07-11 08:37:15

字體：大中小

供稿：網(wǎng)友

原文：http://www.linxz.cn/blog2/article.asp?id=140

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

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

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

css樣式：

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

HTML代碼：

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"></p><p><head></p><p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p><meta name="author" content="Linxz" /></p><p><style type="text/css"></p><p>div {</p><p>position:absolute;</p><p>top:100px;</p><p>left:100px;</p><p>width:200px;</p><p>height:200px;</p><p>border:1px solid red</p><p>}</p><p></style></p><p><title>定位后無(wú)法選擇容器的內(nèi)容解決方案</title></p><p></head></p><p><body></p><p><div></p><p><a href="#">定位后無(wú)法選擇容器的內(nèi)容解決方案</a></p><p></div></p><p></body></p><p></html>
[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

請(qǐng)?jiān)贗E中測(cè)試上面的代碼，你會(huì)發(fā)現(xiàn)文字是無(wú)法選擇的。

當(dāng)時(shí)我想到的方法是在<a href="#">定位后無(wú)法選擇容器的內(nèi)容解決方案</a>后面加上一個(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)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342536.html'>WEB標(biāo)準(zhǔn)教程:功能豐富的段落P標(biāo)簽</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342538.html'>CSS教程:優(yōu)先級(jí)問(wèn)題的考慮實(shí)例</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒(méi)什么話要說(shuō)嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發(fā)表評(píng)論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342537">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342537&down=2"></script></span>條評(píng)論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗(yàn)證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發(fā)表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學(xué)習(xí)交流