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




  • [ 網頁設計教程 ] 在IE7中的網頁文本重影問題—- 其他教程




    教學主題: 在IE7中的網頁文本重影問題

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

    今天的這個教學主題是: 在IE7中的網頁文本重影問題

    這教學的重點為這幾點 [ 問題,文本,網頁,字符,IE6,元素,瀏覽器,引起,內容,c ]

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

    本文重點

    在做項目開發時遇到了一個怪異現象“整段內容被重影”的問題,一般來說這類問題在IE6中表現的比較多,但這次出人意料的是IE7也殃及在內。

    在做項目開發時遇到了一個怪異現象“整段內容被重影”的問題,一般來說這類問題在IE6中表現的比較多,但這次出人意料的是IE7也殃及在內。在早前互聯網上就有分享過使用HTML註釋會引起類似的文字倒影問題,但此時的頁面卻是沒有任何註釋~,持續地測試分析問題變得越來越有趣了…

    測試結果為當不適當地使用float:left/right; width:100%; display:none;CSS屬性值及相應的HTML結構做組合,會引發在IE中的七種怪異問題,此問題在中文及英文字體均會出現。詳細如下例:

    閱讀約定:

    cont1是指:<p class=”cont1″>ABCDEFG</p>
    cont2是指:<p class=”cont2″>1234567</p>

    一、相等長度的文本消失

    在IE6中,cont1與cont2字符長度相同時,文本會消失,且容易引起瀏覽器IE6崩潰。

    但改變瀏覽器窗口尺寸時內容會再次顯示。

    注意:測試了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出現此問題

    DEMO:http://blog.gulu77.com/demo/200908/float/a1.html

    在IE7中的網頁文本重影問題

     

     

    二、當瀏覽器寬度少於內容寬度文本會消失

    在IE6中,當瀏覽器寬度少於內容寬度文本會消失,且容易引起瀏覽器崩潰。

    但改變瀏覽器窗口尺寸時內容會再次顯示。

    注意:測試了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出現此問題

    DEMO:http://blog.gulu77.com/demo/200908/float/a2.html

    在IE7中的網頁文本重影問題

     

     

    三、相等長度文本重影

    在IE6中,cont2比cont1多出一個字符時,內容會被重映為相等長度的文本,且容易引起瀏覽器IE6崩潰。

    DEMO:http://blog.gulu77.com/demo/200908/float/b1.html

    在IE7中的網頁文本重影問題

     

     

    四、當瀏覽器寬度少於內容寬度文本會重影

    在IE6中,cont2比cont1多出一個字符時,且瀏覽器寬度拉伸至小於內容寬度文本會完全重影。

     

    此問題與第三個對比在於一個不需要拉伸,一個需要拉伸。

    DEMO:http://blog.gulu77.com/demo/200908/float/b2.html

    在IE7中的網頁文本重影問題

     

     

    五、文本的倒序重影

    在IE6中,cont2比cont1多出兩個字符或以上時文本會被倒序重影,且容易引起瀏覽器IE6崩潰。

    規律為:重影字符數 = cont1的字符數 + 1個字符數

    DEMO:http://blog.gulu77.com/demo/200908/float/c1.html

    在IE7中的網頁文本重影問題

     

     

    六、內聯元素引起的文本重影

    在IE6中,浮動元素之間有不含內容的內聯元素的標籤(指內聯標籤或CSS模擬的內聯標籤)後會引起文本重影。

    規律為:重影字符數 = 內聯元素數量 * 2字符數 – 1個字符數

    DEMO:http://blog.gulu77.com/demo/200908/float/d1.html

    在IE7中的網頁文本重影問題

     

     

    七、內聯元素引起的IE6/7文本重影與消失

    與第六的《內聯元素引起的文本重影》類似,但在cont2後面添加了一個內聯元素後會導致IE7也出現重影BUG。

    而內聯元素相加超出cont2字符數時,IE7表現正常,IE6則表現為消失。

    規律為:重影字符數 = 數量 * 2字符數 – 1個字符數

    DEMO:http://blog.gulu77.com/demo/200908/float/e1.html

    在IE7中的網頁文本重影問題

    而內聯元素相加超出cont2字符數時,IE7表現正常,IE6則表現為消失。

    注意:測試了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出現此問題

    規律為:重影字符數 = 數量 * 2字符數 – 1個字符數

    DEMO:http://blog.gulu77.com/demo/200908/float/e2.html

    在IE7中的網頁文本重影問題

    感激Mr.Q 提供的解決方法,很不錯~ 給有問題的元素加上position:relative能一一對應解決問題。

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

    希望我們所介紹的 在IE7中的網頁文本重影問題 這教學會喜歡

    文章標題: 骨子愛創意- 在IE7中的網頁文本重影問題–轉載請註明來源處

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

    文章相關關鍵字為: 問題,文本,網頁,字符,IE6,元素,瀏覽器,引起,內容,c

    本文永久連結 :在IE7中的網頁文本重影問題

    本文轉載自 :VIA