CSS工作正常，在IE9但IE8

Question

我邊境半徑和背景梯度不是IE8出現風格完全搞砸了。整體容器的大小在IE8中也有所不同。

我試過CSS PIE，但也失敗了。

期待在此問題上得到任何幫助。請幫助我。

非常感謝大家的提示。

.Quor_Widget_buttondescription0 //Add To Order Button 
{ 

position:relative; 
width:90%; 
font-size: 24px; 
height:47px; 
overflow:hidden; 
margin:8px 8px 5px; 
border:1px solid #000000; 
text-align: center; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
border-radius:10px; 
-moz-box-shadow:0 0 3px rgba(0,0,0,0.5); 
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.5); 
box-shadow:0 0 3px rgba(0,0,0,0.5); 
color:#000000; 
font:bold, Helvetica, Arial, sans-serif; 
cursor:pointer; 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc0NjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2N0JBNjciIG9mZnNldD0iIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzBGQTkwRiIgb2Zmc2V0PSIiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNDYxKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(#0FA90F, #67BA67); 
behavior: url(PIE.htc); 

display: inline-block; 

} 

//選擇按鈕 - 在尺寸標籤

.segmented-button-count3 { 
background: transparent; 
padding: 1px; 
} 
.segmented-button-count3 input[type="radio"] { 
width: 0px; 
height: 0px; 
display: none; 
} 
.segmented-button-count3 label { 
width:33.3%; 
height:20px; 
padding-top: 4px; 
padding-bottom: 1px; 
overflow: hidden; 
white-space: nowrap; 
display: block; 
text-overflow: ellipsis; 
display: -moz-inline-box; 
-moz-box-orient: vertical; 
display: inline-block; 
vertical-align: middle; 
vertical-align: auto; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
-ms-border-radius: 10px; 
-khtml-border-radius: 10px; 
border-radius: 10px; 
text-shadow: white; 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczNjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZCRkJGQiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0M5QzlDOSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzM2MSkiIC8+Cjwvc3ZnPg==); 
background-repeat: no-repeat; 
background-size:100%; 
-webkit-box-shadow: inset 0 -4px 7px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3); 
-moz-box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3); 
box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3); 
background: -moz-linear-gradient(#fbfbfb, #c9c9c9); 
border: 1px solid #b2b2b2; 
color: 000000; 
font-size: 13px; 
cursor: pointer; 
font-family: Helvetica; 
-moz-border-radius: 0px; 
-webkit-border-radius: 0px; 
-o-border-radius: 0px; 
-ms-border-radius: 0px; 
-khtml-border-radius: 0px; 
border-radius: 0px; 
margin-right: -5px; 
} 
.segmented-button-count3 label { 
*display: inline; 
} 
.segmented-button-count3 label:hover { 
-moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 
-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 
-o-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 
color: #333333; 
} 
.segmented-button-count3 label:active, .segmented-button-count3 label.active { 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcyMDYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMyRDYyQkUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM2Q0E1RjUiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2cyMDYpIiAvPgo8L3N2Zz4=); 
background-repeat: no-repeat; 
background-size:100%; 
background: -moz-linear-gradient(#2d62be, #6ca5f5); 
} 
.segmented-button-count3 label.first { 
-moz-border-radius-topleft: 10px; 
-webkit-border-top-left-radius: 10px; 
-o-border-top-left-radius: 10px; 
-ms-border-top-left-radius: 10px; 
-khtml-border-top-left-radius: 10px; 
border-top-left-radius: 10px; 
-moz-border-radius-bottomleft: 10px; 
-webkit-border-bottom-left-radius: 10px; 
-o-border-bottom-left-radius: 10px; 
-ms-border-bottom-left-radius: 10px; 
-khtml-border-bottom-left-radius: 10px; 
border-bottom-left-radius: 10px; 
} 
.segmented-button-count3 label.last { 
-moz-border-radius-topright: 10px; 
-webkit-border-top-right-radius: 10px; 
-o-border-top-right-radius: 10px; 
-ms-border-top-right-radius: 10px; 
-khtml-border-top-right-radius: 10px; 
border-top-right-radius: 10px; 
-moz-border-radius-bottomright: 10px; 
-webkit-border-bottom-right-radius: 10px; 
-o-border-bottom-right-radius: 10px; 
-ms-border-bottom-right-radius: 10px; 
-khtml-border-bottom-right-radius: 10px; 
border-bottom-right-radius: 10px; 
} 
.segmented-button-count3 input:checked + label, .segmented-button-count3 label.selected { 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcyMDYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMyRDYyQkUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM2Q0E1RjUiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2cyMDYpIiAvPgo8L3N2Zz4=); 
background-repeat: no-repeat; 
background-size:100%; 
background: -moz-linear-gradient(#2d62be, #6ca5f5); 
} 

Answer 1

Internet Explorer 8中沒有對SVG的原生支持。它很少或根本不支持CSS3屬性，例如border-radius。

最好的解決方案可能是爲自定義樣式（例如JPG背景而不是SVG）製作一個單獨的樣式表，並且只顯示IE8。

你也應該看看Modernizr。

或者強制用戶使用一個真正的Web瀏覽器;-)

Answer 2

答：爲了實現邊界半徑，箱陰影和IE6-9漸變背景，CSS3 PIE可以使用。正如SDC提到的那樣，您可能需要確保PIE.htc文件實際上正在加載。舉個例子：

.button { 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
      border-radius: 12px; 

    -webkit-box-shadow: #888 5px 5px 5px; 
    -moz-box-shadow: #888 5px 5px 5px; 
      box-shadow: #888 5px 5px 5px; 

    background: #444; /* Single-color fallback */ 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#444), to(#CCC)); /* Chrome, Safari 4+ */ 
    background: -webkit-linear-gradient(#444, #CCC); /* Chrome 10+, Safari 5.1+ */ 
    background: -moz-linear-gradient(#444, #CCC); /* FF 3.6+ */ 
    background: -ms-linear-gradient(#444, #CCC); /* IE10+ */ 
    background: -o-linear-gradient(#444, #CCC); /* Opera 11.10+ */ 
    background: linear-gradient(#444, #CCC); /* W3C */ 

    -pie-background: linear-gradient(#444, #CCC); /* For CSS3 PIE */ 
    behavior: url(PIE.htc); /* Also for CSS3 PIE */ 
} 

最佳實踐：您可能要考慮重新寫你的CSS。有很多重複和不必要的屬性和黑客讓代碼在特定的瀏覽器中工作。在瀏覽器之間以一致性開始的一種簡單方法是使用CSS重置，例如Normalize.css。

Answer 3

從截圖中可以清楚地看出，CSS3Pie根本沒有運行。我建議閱讀CSS3Pie網站上列出的常見問題和已知問題;看起來你可能正在對其中一個犯規。

特別是，您應該檢查PIE.htc文件是否正在加載，並且它正在使用正確的MIME類型。 （請參閱IE8的開發工具窗口以查看加載了哪些URL）

第一點 - 如果文件未被加載，則可能是加載了錯誤的URL。給定htc文件的相對URL時，IE可能會出錯;將其更改爲絕對URL是一個好主意;例如/PIE.htc而不僅僅是PIE.htc。這在known issues page中討論。

第二點還在已知問題頁面上討論。某些網絡服務器可能無法使用正確的MIME類型提供htc文件。如果它不作爲text/x-component，IE將完全忽略它。檢查下載文件時發送的http頭。