• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] CSS浮動引起文本重影的怪異問題—- 其他教程




    教學主題: CSS浮動引起文本重影的怪異問題

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: CSS浮動引起文本重影的怪異問題

    這教學的重點為這幾點 [ 問題,文本,引起,浮動,元素,沒有,定位,IE6,屬性,分析 ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    事物絕非十全十美總有強差人意的一面,之前針對浮動分析了其引起文本重影的怪異問題,而作為浮動布局的最佳搭檔定位布局也存在一定的缺陷。

    事物絕非十全十美總有強差人意的一面,之前針對浮動分析了其引起文本重影的怪異問題,而作為浮動布局的最佳搭檔定位布局也存在一定的缺陷。

    圍繞着定位列出的種種問題,對某些情況只是作出了分析而暫時沒有找到有解決方案,但既然知道問題所在,我們可以儘可能的採取其它措施避免這現象。

    position:relative;屬性值導致overflow:hidden;失效。

    問題:在IE6/7中子級設置position:relative;屬性值后,導致父級的overflow:hidden;失效。Demo1

    CSS浮動引起文本重影的怪異問題

    分析:與定位的層級關係有關,IE6/7解析為內容已經跳出文檔流,以致父級誤以為沒有包含內容。

    解決方案:

    對於IE6可以為父級添加定位屬性糾正問題,但IE7依然無效。

    overflow充當了position:relative的角色

    問題:在IE6或IE quirks模式中設定overflow:auto/hidden/scroll屬性值后,元素顯示效果相當於position:relative的相對定位效果。

    Demo2

    CSS浮動引起文本重影的怪異問題

    分析:在怪異模式與標準模式下的頁面對CSS的解析會有一定的差異甚至是扭曲了其屬性的作用,對這現象暫時還沒有衝破的能力,也只能記錄與迴避了。

    沒有實渲染導致絕對定位的錯誤

    問題:在IE6中,子級元素絕對定位於父級元素時,當動態改變父級寬高時,子級位置沒有發生變化。Demo3

    CSS浮動引起文本重影的怪異問題

    分析:估計是動態改變父級寬度時,IE6並沒有實時對瀏覽器渲染。暫時沒有CSS能解決這問題,但可嘗試使用JS對改變改模塊高度進行刷新解決這問題。

    IE6中position:relative;屬性值無效

    問題:在IE6及以下版本,父級元素已設置position:relative;屬性值,但子級絕對定位元素沒有生效。Demo4

    CSS浮動引起文本重影的怪異問題

    分析:原因在於父級元素沒有觸發haslayout(相關資料請搜索On having layout),IE7及以上的高級瀏覽器則不存在這問題。

    解決方案:

    在父級元素中添加讓其觸發haslayout的CSS屬性值。

    奇數引起定位的1pxBUG

    問題:在IE6及以下版本,父級元素寬度高度為奇數時,子級元素絕對定位於(right:0;bottom:0;),會出現往內偏移1px的錯誤。Demo5

    CSS浮動引起文本重影的怪異問題

    分析:其真正原因還得問IE6的開發者了。但從例子中可以觀察到左上角的子級元素顯示正常,其原因為“盒子”拉伸擴展為上至下左至右,估計於此以至靠左邊或頂部的位置不會發生移動的變化。

    討論:http://www.missyuan.com/viewthread.php?tid=431859

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 CSS浮動引起文本重影的怪異問題 這教學會喜歡

    文章標題: 骨子愛創意- CSS浮動引起文本重影的怪異問題–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 問題,文本,引起,浮動,元素,沒有,定位,IE6,屬性,分析

    本文永久連結 :CSS浮動引起文本重影的怪異問題

    本文轉載自 :VIA