解決IE以及其他瀏覽器的css3樣式的兼容問題

border-radius：
需要PIE.js文件的引入 以及 behavior: url(路徑/PIE.htc);

.southone{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    behavior: url(路徑/PIE.htc);

}

nth-child：
將 div ul li:nth-child(1){ } 改爲 div ul li:first-child { } /選取第一個li/
將div ul li:nth-child(3){ } 改爲 div ul li:first-child+li+li {} /*選取第三個li */

以此類推 就ok。

web兼容火狐瀏覽器默認顯示2行，多出去的省略號代替

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

background: -webkit-linear-gradient(left,rgba(243,3,1,1), rgba(254,80,23,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left,rgba(243,3,1,1), rgba(254,80,23,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left,rgba(243,3,1,1), rgba(254,80,23,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(left,rgba(243,3,1,1),rgba(254,80,23,1)); /* 標準的語法（必須放在最後） */

正常寫法：
默認顯示一行 多省略號代替

text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;

默認顯示2行 多餘省略號代替

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

transform: translate：
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);