CSS3 Pie偶爾工作

Question

我正致力於將我們公司的Web應用程序推入21世紀，並試圖使用一些新的CSS3功能，如border-radius和box-shadow，以獲得更現代的視覺效果。但是，超過90％的用戶羣仍在IE8上，而IE8不支持這些選項。 CSS3 Pie看起來像是一個完美的解決方案，但我遇到了一些奇怪的問題。

通過一些試驗和錯誤，我設法獲得了所有我想在IE8中使用的CSS屬性。使用的類別的一些示例如下：

.pageTitle { 
     border-radius: 12px; 
     color:#fff; 
     text-shadow: 1px 1px 0px #666; 
     box-shadow: 5px 5px 3px #888888; 

     background: -webkit-linear-gradient(blue, black); /* For Safari */ 
     background: -o-linear-gradient(blue, black); /* For Opera 11.1 to 12.0 */ 
     background: -moz-linear-gradient(blue, black); /* For Firefox 3.6 to 15 */ 
     background: linear-gradient(-0.5deg, black, blue); /* Standard syntax */ 
     -pie-background: linear-gradient(top, blue, black); /*ie 6-9 via PIE*/ 

     behavior: url(../../common/compatibility/PIE.htc); 
    } 

    .headerGradient { 
     background: -webkit-linear-gradient(blue, black); /* For Safari */ 
     background: -o-linear-gradient(blue, black); /* For Opera 11.1 to 12.0 */ 
     background: -moz-linear-gradient(blue, black); /* For Firefox 3.6 to 15 */ 
     background: linear-gradient(-0.5deg, black, blue); /* Standard syntax */ 
     -pie-background: linear-gradient(top, blue, black); /*ie 6-9 via PIE*/ 
     behavior: url(../../common/compatibility/PIE.htc); 
     position:relative; 
    } 

第一個用在頁面頂部的div上，只有一個或兩個文本在裏面。第二個用於我們某些顯示錶的標題。

偶爾，當我使用這些類訪問一個頁面時，元素將不會出現。它看起來幾乎像是類被忽略（導致元素用白色背景渲染），但元素中的文本應該以黑色顯示並仍然可見。不是這樣;我只是看到一個開放的空白區域（儘管這些元素內部的圖像仍然會出現）

當發生這種情況時，只需將鼠標移到它上面，就可以使「pageTitle」div正確顯示。但是，這在「headerGradient」（以及類似的）表頭上不起作用。刷新頁面有時可以解決問題，但通常需要花費相當多的工作才能讓CSS3 Pie再次啓動。

我無法在CSS3 Pie網站上重現此問題，也沒有在其他地方看過它，所以我認爲在我的實現中可能有不正確的地方。我會很感激任何想法。

UPDATE

餅圖文件移動到我的根目錄，在我們的應用程序生命的外殼頁，其中的一些問題似乎消失了（雖然這是難以用零星的問題告訴）。但是，仍然有一些情況下，只有在將鼠標移到它們上方時，標題纔會顯示，而不需要樣式。我所有的樣式應用到CFLayoutAreas（EXT-JS標籤和手風琴）無法正常工作：

 /* Controls the header of the cflayout accordions. */ 
     .x-accordion-hd { 
      background: -webkit-linear-gradient(#9999ff, #333366); /* For Safari */ 
      background: -o-linear-gradient(#9999ff, #333366); /* For Opera 11.1 to 12.0 */ 
      background: -moz-linear-gradient(#9999ff, #333366); /* For Firefox 3.6 to 15 */ 
      background: linear-gradient(-0.5deg, #333366, #9999ff); /* Standard syntax */ 
      -pie-background: linear-gradient(top, #9999ff, #333366); /*ie 6-9 via PIE*/ 
      behavior: url(PIE.htc); 
      position:relative; 
     } 

     .x-tab-strip,.x-tab-left,.x-tab-right { 
      border-radius:5px 5px 0px 0px; 

      background: -webkit-linear-gradient(#9999ff, #333366) !important; /* For Safari */ 
      background: -o-linear-gradient(#9999ff, #333366) !important; /* For Opera 11.1 to 12.0 */ 
      background: -moz-linear-gradient(#9999ff, #333366) !important; /* For Firefox 3.6 to 15 */ 
      background: linear-gradient(-0.5deg, #333366, #9999ff) !important; /* Standard syntax */ 
      -pie-background: linear-gradient(top, #9999ff, #333366) !important; /*ie 6-9 via PIE*/ 
      behavior: url(PIE.htc); 
      position:relative; 
     } 

事實上，標籤和標籤欄完全消失。

我歡迎任何建議。

更新2

通過移動PIE包括在頁面的底部，大多數問題都消失了。 CFLayout仍然不是很好玩，所以我只是使用PIE禁用佈局區域的樣式。

我剩下的一個問題是，PIE似乎沒有相應地調整自己的頁面更新。當我們的詳細頁面加載時，頁面中央有一個cfLayout，底部有PIE樣式的按鈕。按鈕在頁面加載時正確顯示，而cfLayout仍然不可見。然後，cfLayout出現並按下頁面上的按鈕。然而，有時候，按鈕的PIE樣式將保留在它們加載的位置，而不是使用按鈕本身向下移動頁面。

有什麼辦法可以調用PIE強制位置更新根據父元素的當前位置？

Answer 1

如果正在使用腳本加載的css正在對正在消失的項目進行樣式化，請在jQuery之後在頭部加載該腳本。我注意到兩個腳本沒有在IE8的工作中應用樣式，當我在頭部加載腳本時，他們再次工作。我有我的jQuery lib加載在頭部，但所有其他人在腳註中，但需要在腳本中加載需要腳本應用回退的兩個腳本。

沒有看到代碼，IE8消失列表項通常通過在ul或包裝上添加相對位置來解決，或者兩者兼而有之。如果這不起作用，請將它保留在那裏，並用z-index撥弄。然後重新檢查好的瀏覽器或使用IE8 CSS hacks。

一些其他的想法嘗試：

• 確保你在你的代碼有html5 shiv而且它的加載（谷歌並不總是向上）。我使用我的modernizer構建本地託管它。如果消失的項目被通過一個腳本，載荷腳本在頭部的jQuery後加載CSS樣式Header disappears and lists become unstyled in IE 8 and below

• ：閱讀本。我注意到兩個腳本沒有在IE8的工作中應用樣式，當我在頭部加載腳本時，他們再次工作。我有我的jQuery lib加載在頭部，但所有其他人在腳註中，但需要在腳本中加載需要腳本應用回退的兩個腳本。