1

我需要支持 IE10 并且在我的 CSS 上我使用的border-image是 IE10< 不支持。我的modernizr 已经支持，border-image但我不明白如何在我的课堂上使用它。例如，如果我有一个像

 .funz__box { border-style: solid;
 border-width: 30px 30px 30px 25px;
 -moz-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
 -webkit-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
 -o-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
 border-image: url(../i/tmp/border_funz.png) 30 30 30 25 fill; }

为了支持 IE 10，我只需要创建一个类，例如：

.no-borderimage .funz__box { /* my stile */ }

或者还有什么我应该做的吗？

4

2 回答 2

1

这是一个使用JQuery的简单示例：

CSS：

.borderimage_class{
    border-style: solid;
    border-width: 30px 30px 30px 25px;
    -moz-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
    -webkit-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
    -o-border-image: url(../i/tmp/border_funz.png) 30 30 30 25;
    border-image: url(../i/tmp/border_funz.png) 30 30 30 25 fill;
}

.no_borderimage_class{
    //styles
}

JS：

if(Modernizr.borderimage){
    //true - supports
    $('.some_element_class').addClass('borderimage_class');
}
else{
    //false - doesn't support
    $('.some_element_class').addClass('no_borderimage_class');
}

JSFiddle -<p>根据borderimage支持更改颜色。在 IE10 和其他一些支持的浏览器中测试它，borderimage你会看到变化。

于 2015-08-07T08:16:00.187 回答
0

您根本不需要触摸 JQuery - 您可以在 CSS 中完成所有操作，您只需要在要设置样式的内容之前添加.borderimage和。.no-borderimage例如：

.borderimage #header_right{ 
//the CSS you want to apply to element ID header_right when border-image IS supported 
}

.no-borderimage #header_right{ 
//the CSS you want to apply to element ID header_right when border-image is NOT supported 
}

.no-borderimage #header_logo{ 
//some more CSS that I only want applied to element ID header_logo when border-image is NOT supported 
}

我刚刚在我的网站上使用了它，它运行良好

于 2015-08-07T18:31:44.423 回答