2013-01-19 84 views
1

我有這個只支持Firefox的CSS代碼。如何重寫IE瀏覽器的這個CSS

/* Green header */ 
.container { 
    background: linear-gradient(#5FA309, #3B8018); 
    position: relative; 
    display: inline-block; 
    padding: 0 20px 0 10px; 
    width: 270px; 
    line-height: 20px; 
    font-size: 12px; 
    font-family: sans-serif; 
    text-shadow: 0 1px 0 #264400; 
    font-weight: bold; 
    color: #fff; 
} 

.container:after { 
    content: ''; 
    background: linear-gradient(top left, #5FA309, #3B8018); 
    background: -webkit-gradient(linear, left top, left bottom, from(#5FA309), to(#3B8018)); 
    background: -moz-linear-gradient(top left, #5FA309, #3B8018); 
    position: absolute; 
    top: 3px; right: -7px; 
    width: 15px; 
    height: 15px; 
    transform: rotate(45deg); 
} 

我怎樣才能讓這段代碼也支持IE?我只想使用沒有圖像的CSS。

+0

從哪個IE版本? – nhahtdh

+0

我想支持最新的IE版本。 –

+0

你確定? IE10是最新版本,但IE用戶的一半仍然使用IE8。 http://en.wikipedia.org/wiki/Internet_Explorer#Desktop_Market_share_by_year_and_version – nhahtdh

回答

2

注意使用-ms-供應商名稱和順序,其中供應商前綴設置:

.container{ 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5fa309), color-stop(1, #3b8018)); 
    background:-webkit-linear-gradient(top, #5fa309 0%, #3b8018 100%); 
    background:-moz-linear-gradient(top, #5fa309 0%, #3b8018 100%); 
    background:-o-linear-gradient(top, #5fa309 0%, #3b8018 100%); 
    background:-ms-linear-gradient(top, #5fa309 0%, #3b8018 100%); 
    background:linear-gradient(top, #5fa309 0%, #3b8018 100%); 
    position:relative; 
    display:inline-block; 
    padding:0 20px 0 10px; 
    width:270px; 
    line-height:20px; 
    font-size:12px; 
    font-family:sans-serif; 
    text-shadow:0 1px 0 #264400; 
    font-weight:bold; 
    color:#fff 
} 
.container:after{ 
    content:''; 
    background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #5fa309), color-stop(1, #3b8018)); 
    background:-webkit-linear-gradient(top left, #5fa309 0%, #3b8018 100%); 
    background:-moz-linear-gradient(top left, #5fa309 0%, #3b8018 100%); 
    background:-o-linear-gradient(top left, #5fa309 0%, #3b8018 100%); 
    background:-ms-linear-gradient(top left, #5fa309 0%, #3b8018 100%); 
    background:linear-gradient(top left, #5fa309 0%, #3b8018 100%); 
    position:absolute; 
    top:3px; 
    right:-7px; 
    width:15px; 
    height:15px; 
    -webkit-transform:rotate(45deg); 
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg); 
    -ms-transform:rotate(45deg); 
    transform:rotate(45deg) 
} 
+0

你不需要webkit之前聲明的'gradient'和'linear-gradient'的wc3標準嗎?只是我聽過的東西。 – sourRaspberri

+1

不,請將供應商前綴的順序視爲「if」語句。如果用戶使用webkit,則渲染「-webkit」前綴屬性等,否則,如果用戶使用的是支持該標準的瀏覽器,請將該屬性設置爲標準前綴。這裏有一篇有趣的文章解釋它:http://css-tricks.com/ordering-css3-properties/ – razorbeard

+0

這就是我原來的想法!但我被告知不然:S感謝清除:)大聲笑 – sourRaspberri