在测试我目前正在设计的网站的浏览器兼容性时,我发现 CSS 渐变在网站的所有部分都运行良好,除了 IE 8 和 IE 9 中的导航链接。
我正在为此使用“过滤器”属性。导航的 HTML 结构是
<ul id="nav"><li><a>Some Name</a></li></ul>
元素的 CSS 是,
#nav li a
{
background: rgb(191,82,0);
background: -moz-linear-gradient(top, rgb(191,82,0) 0%, rgb(124,51,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,82,0)), color-stop(100%,rgb(124,51,0)));
background: -webkit-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
background: -o-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
background: -ms-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf5200', endColorstr='#7c3300',GradientType=0 );
background: linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
position: relative;
height: 1.3em;
padding: 0.2em 2em 0.1em 2em;
color: #FFF;
font-size: 0.9em;
font-family: FertigoProRegular;
text-transform: uppercase;
border-radius: 1em;
box-shadow: 0em 0em 0.5em #aaa;
border-bottom: 3px solid #5C2600;
}
我尝试为导航链接分配一个特定的 ID,然后将 CSS 应用于它。但那没有成功。我知道 PIE 和其他类似的 HTC 行为元素会起作用。但我想知道为什么它不只在那个领域起作用。
首先我认为这是所有 <a>
都会出现的问题元素。但事实并非如此,因为渐变在其他 <a>
上完美显示。网站上的元素。问题仅限于导航链接。
如有任何帮助,我们将不胜感激。
最佳答案
当我做渐变菜单时,我总是使用 Ultimate CSS Gradient Generator
输出较旧的 Internet Explorer 不透明度格式(是的,这甚至适用于 IE6!
关于internet-explorer - IE 8+ 中的 CSS 渐变适用于网站的所有部分,除了一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7453515/