Question

我正在尝试使用剃刀视图首次创建和启动网站（C＃.Net MVC）。

我在网站上大量使用线性渐变，自启动以来我意识到IE版本9及更低版本中不支持渐变

我想根据浏览器类型和版本选择渐变样式。

例如：

@if(browser is IE 9 and under){
style="background: #ffffff;
}
Else{
style="background:linear-gradient(to bottom, #ffffff 0%,#ffffff 100px,#b8dbff 100%);
}

如何在Razor视图中检测浏览器类型和版本？

过滤与线性渐变不兼容的浏览器版本最简单的方法是什么？

向前端开发人员致敬，我不知道这些跨浏览器问题是一个问题。

当一些东西在浏览器中不起作用时，我自己会抱怨很多

Answer 1

你应该看看Modernizr，一个用于检测浏览器支持功能的javascript库。我想它会完成这项工作。

您可以在此处找到一些内容：http://modernizr.com/docs/#features-css

用于理解概念的好视频：http://css-tricks.com/video-screencasts/126-using-modernizr/

Answer 2

您可以使用Razor引擎根据调用者提供不同的视图，但听起来您可以使用HTML / CSS处理您的情况。

如果IE9是您唯一的问题，您可以使用conditional comments并添加额外的样式/样式表。

<!--[if IE 9]>
<style>
   #foo { background-color: #fff; }
</style>
<![endif]-->

但是对于您的特定问题，您应该能够做一些更简单的事情，只需修改样式表：

body{
    /* all browsers */
    background: red;

    /* newer browsers overwrite the previous value; old browsers ignore */
    background: linear-gradient( to left top, blue, red); 
}

IE9不知道“线性渐变”的含义，因此忽略它。这是你可以依赖的defined behavior。

演示：http://fiddle.jshell.net/K67yd/2/show/

在Razor视图中 - 如何检测浏览器类型和版本以选择线性渐变的类型

2 个答案: