我的团队正在开发一个 ASP.NET Web 应用程序,我们正试图在几个主要浏览器(IE、Chrome、Firefox)的浏览器类型和版本上保持一致的外观和感觉。如果可能,我们还希望允许主题化,以便用户可以选择颜色、字体大小等。但是,由于目前有一些 CSS3 规则,我在实现与 IE 8 和 9 的兼容性方面遇到了严重问题。特别是,这里使用的阴影渐变div
会造成麻烦,因为 IE 8 或 9 不支持它们:
#logos
{
width:1024px;
height:100px;
border-radius:15px;
color: -moz-linear-gradient(bottom, #297381, #FFFFFF);
color: -ms-linear-gradient(bottom, #297381, #FFFFFF);
color: -webkit-linear-gradient(bottom, #297381,#FFFFFF);
background:-moz-linear-gradient(bottom, #297381,#FFFFFF);
background:-ms-linear-gradient(bottom, #297381,#FFFFFF);
background:-webkit-linear-gradient(bottom, #297381,#FFFFFF);
}
我相信(如果我错了,请纠正我)我可以通过添加以下规则来实现 IE9 中的渐变:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#297381', EndColorStr='#FFFFFF')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#297381’, EndColorStr='#FFFFFF');
但我认为 IE8 中没有任何相应的选项,我也不相信它支持border-radius
。我希望有一个单独的主题或规则,使用静态图像作为背景div
。有什么方法可以检测 css 中的浏览器版本并应用正确的规则或主题?还是必须在后面的代码中完成并从那里相应地设置主题?