跨浏览器 css

【问题标题】：Cross-Browsers css跨浏览器 css
【发布时间】：2012-09-30 06:26:41
【问题描述】：

<asp:ImageButton ID="Bt_1" runat="server" CausesValidation="false" CssClass="clr_bt" />
.clr_bt
{
    -webkit-transform: rotate(-50deg);
    -webkit-transition: -webkit-transform 0.5s ease-in;
}

谁能帮我修复一下 Opera、IE、Mozilla 的问题。

暂时只适用于 Chrome。

【问题讨论】：

-webkit 前缀只会将样式应用于 Chrome 和 Safari。此链接可能会有所帮助：prefixmycss.com
这里有一个关于此类问题的好资源：caniuse.com
IE 转换是不同的，可能需要的不仅仅是不同的前缀。

标签： asp.net css browser cross-browser

【解决方案1】：

您必须将浏览器的供应商前缀添加到您的 css 中，如下所示：

.clr_bt {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);

    -webkit-transition: 0 .5s ease-in;
    -moz-transition: 0 .5s ease-in;
    -o-transition: 0 .5s ease-in;
    transition: transform .5s ease-in;
}

为Chrome和Safari添加了webkit前缀
为Firefox添加了moz前缀
为IE添加了ms前缀
为Opera添加了o前缀

【讨论】：