DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 容器定位
容器定位
編輯:CSS詳解     

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

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

xHtml結構:

<div>
<a href="#">定位後無法選擇容器的內容解決方案</a>
</div>

CSS樣式:

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

Html代碼:

運行代碼框

 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

請在IE中測試上面的代碼,你會發現文字是無法選擇的。

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

然後想到了在藍色理想論壇中的一個帖子裡有提到這個問題,在“[教程] 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代碼:

運行代碼框

 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

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

後來,老同事“表哥”發了一個網址,是老外的,上面介紹的方法是通過

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

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

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

Html代碼:

運行代碼框

 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved