0

对于现代浏览器，我在菜单悬停状态背景上使用 CSS 渐变。IE 中的渐变滤镜看起来不太好，所以我将使用从 chrome 屏幕截图中获取的背景图像。我遇到的问题是，在 IE 中，当子菜单链接悬停时，仅显示一半元素背景，下半部分被剪裁。使用 IE 开发人员工具，该元素似乎具有适当的高度，但只显示了一半的背景。

.main-navigation li ul li a {
    overflow: visible;
    font-family: 'HelveticaNeue', helvetica;
    font-size: 12px;
    background: rgba(220, 220, 220, 0.0);
    border-bottom: 1px solid rgba(0, 0, 0, 0.0);
    width: 178px;
    margin: 0px auto;
    height: 38px;
    line-height: 3.2em;
    color: #fefefe;
    text-transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}   

.main-navigation li ul li a:hover {
    background: #dddddd; /* Old browsers */
    background: -moz-linear-gradient(top, #dddddd 0%, #545454 2%, #191919 95%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(2%,#545454), color-stop(95%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dddddd 0%,#545454 2%,#191919 95%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dddddd 0%,#545454 2%,#191919 95%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #dddddd 0%,#545454 2%,#191919 95%); /* IE10+ */
    background: linear-gradient(to bottom, #dddddd 0%,#545454 2%,#191919 95%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
    border: none !important;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
    background-image: url('img/subhoverbg.png') !important;
    background-repeat: repeat;
}
4

0 回答 0