關於容器定位的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的相關知識,請參考:
aoao:在IE6版本是_.070227-2254好像依然存在問題,加了背景色依然無效。接着測試中。。。
但根據aoao說的在IE6版本是_.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爲定位和浮動提供了一些屬性,利用這些屬性,可以建立列式佈局,將佈局的一部分與另一部分重疊,還可以完成多年來通常需要使用多個表格才能完成的任務。定位的基本思想很簡單,它允許你定義元素框相對於其正常位置應該出現 -
CSS3水波漣漪動畫定位樣式製作教程
以下是關於CSS3水波漣漪動畫定位樣式製作教程,有需要的朋友可參考學習! 先上效果圖: 教程本動畫需要用到的`主要屬性:animation, transition 和 Keyframes 屬性。效果完成了,此案例比較適合圖像定位標識用,當然 -
CSS選擇器教程
上節課我們講了一下CSS通過什麼方式去控制頁面,如果不記得,我來幫大家回憶一下,總共有四種方式行內方式、內嵌方式、鏈接方式、導入方式,大家通過這四種方式就可以實現CSS對HTML頁面樣式的控制,如果要讓這些樣式對HTML頁面 -
Cisco路由器ISDN配置教程
在下面的例子中基本速率端口(BRI)端口被配置爲IP路由,並封裝PPP協議,採用CHAP做認證。爲了你參考方便,下一節提供了一個配置的例子Example ISDN Configuration,你在看這一節的時候也許會需要參考下節的例子。按照下面的步 -
CSS實用教程:CSS命名
在XHTML中定義ID、CLASSS都用得上,主要是方面CSS定義樣式時能一眼看穿。所以,CSS命名僅作參考。(1)頁面結構類容器: container頁頭:header內容:content/container頁面主體:main頁尾:footer導航:nav側欄:sidebar欄目:column頁面 -
關於網頁圖片屬性的CSS教程
圖片外框特徵參數:①dashed:虛線②dotted:點虛線③solid:實線④double:雙線⑤groove:溝槽狀⑥ridge:脊狀⑦inset:內嵌⑧outset:外嵌 CSS TP特殊效果風格屬性①灰/黑:Gray/Xray②差值:Invert③水平:Fliph④垂直:Flipv⑤羽 -
CSS教程之內容設置的一些語法
一、white-space可以實現HTML中PRE標籤的效果,以及單元格的noWrap效果。語法:white-space : normal | pre | nowrap取值:normal: 默認值。默認處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行pre: 換行和其 -
CSS中關於變量的基本教程詳解
CSS中的變量給了我們諸多優點:方便、代碼重用、更可靠的代碼庫和提升防錯能力。示例CSS Code複製內容到剪貼板 :root{ --base-font-size:16px; --link-color:#6495ed; } p{ font-size:var(--base-font-size); } a{ fon -
CSS瀏覽器兼容問題的詳細解答
下面由小編打來CSS瀏覽器兼容問題的詳細解答,希望對諸位有所幫助。 1. Div居中問題 div設置 margin-left, margin-right 爲 auto 時已經居中,IE 不行,IE需要設定body居中,首先在父級元素定義text-algin: center; -
關於css框架網頁設計教程
1、框架中國的互聯網行業已經發展了10年,瀏覽器也從最早流行的NS到現在的7等等……前端開發工程師的職位也誕生了。近幾年在web開發中,有個非常火的詞——“框架”。YUI、JQuery、Prototype這些javascript框架在開發網