CSS:菜单在 Firefox 中以正确的空格显示

Question

我刚刚开始使用 CSS 并创建了一个下拉菜单。在 Chrome 和 IE 中一切看起来都不错，但在 Firefox 中我遇到了两个问题:

1) 渐变不是 Chrome 或 IE 中的浅绿色，而是更深/更深的灰色。

2) 菜单显示在右边多出7px。这些 7px 不仅仅是空白空间，因为它有我的 nav ul 元素的背景，但它不是任何 li 元素的一部分(虽然可能是由)。

关于第二个问题，我发现Firefox在li元素周围添加了空格，因此我在HTML代码中的li元素前后添加了注释代码。我是否需要改为在 CSS 中调整边距、填充或显示？

希望有人能帮帮我!

HTML:

<nav>
<ul><!--
--><li><a class="MenuLinks" href="#">About Us</a><!--
        --><ul><!--
            --><li><a href="#">Mission & Vision</a></li><!--
            --><li><a href="#">How Do We Contribute?</a></li><!--
            --><li><a href="#">History</a></li><!--
        --></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Renewable Energy</a><!--
            --><ul><!--
            --><li><a href="#">What is Renewable Energy?</a></li><!--
            --><li><a href="#">The Future of Renewable Energy</a></li><!--                
            --><li><a href="#">Towards Sustainable Living</a></li><!--
        --></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Our Projects</a><!--
        --><ul><!--
            --><li><a href="#">Current Projects</a></li><!--
            --><li><a href="#">Past Projects</a></li><!--
        --></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Education</a><!--
        --><ul><!--<!--
            --><li><a href="#">ALTENER Education</a></li><!--
            --><li><a href="#">Learning Materials</a></li><!--
            --><li><a href="#">Partners in Education</a></li><!--
        --></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">How to Participate</a><!--
        --><ul><!--
            --><li><a href="#">Make a Donation</a></li><!--
            --><li><a href="#">Volunteer with Us</a></li><!--
            --><li><a href="#">Become a Partner</a></li><!--
        --></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Contact Us</a><!-- 
--></li><!--
--></ul>
</nav></td>

CSS:

nav ul ul {
display: none;
}
nav ul li:hover > ul {
    display: block;
}

nav ul {
background: linear-gradient(to bottom, transparent 30%, #c8dc9a 100%);  
background: -moz-linear-gradient(top, transparent 30%, #c8dc9a 100%); 
background: -webkit-linear-gradient(top, transparent 30%, #c8dc9a 100%); 
background: -ms-linear-gradient(top, transparent 30%, #c8dc9a 100%);
background: -o-linear-gradient(top, transparent 30%, #c8dc9a 100%);
padding: 0;
margin: 0;
font-size: 16px; 
text-indent: 7px;
white-space: nowrap;
list-style: none;
position: relative;
text-align: left;
display: inline-block;
}

nav ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

nav ul li {
float: left;
    border-bottom: 3px solid #244612;
}

/* Set hover properties for main menu items */
nav ul li:hover {
    background: #e29a0e;
    background: linear-gradient(to bottom, transparent 0%, #e29a0e 100%);
    background: -moz-linear-gradient(top, transparent 0%, #e29a0e 100%);
    background: -webkit-linear-gradient(top, transparent 0%, #e29a0e 100%);
    background: -ms-linear-gradient(top, transparent 0%, #e29a0e 100%);
    background: -o-linear-gradient(top, transparent 0%, #e29a0e 100%);
}
    nav ul li:hover a {
        color: #000000;
    }
    nav ul li:hover ul li a{
        color: #757575;
    }
nav ul li a {
    display: block;
    padding: 10px 13px;
    color: #757575; 
    text-decoration: none;
}

/* Set general properties for dropdown menu items */    
nav ul ul {
background: #F7F7F7; 
border-radius: 0px; 
padding: 0;
position: absolute; 
top: 100%;
font-size: 14px;
}
/* Set hover properties for dropdown menu items */  
nav ul ul li {
    float: none; 
    border-top: 1px solid #C9CCCF;
    border-bottom: 0px solid #C9CCCF;
    position: relative;
}
    nav ul ul li a {
        padding: 10px 25px;
    }   
        nav ul li:hover ul li a:hover {
            background: #e29a0e;
            color: #000000;
        }

Answer 1

1)

这是 Firefox 在处理 transparent 关键字时的一个缺陷。它与 rgba(0,0,0,0) 一样对待它，因此颜色从黑色变为浅绿色。 (当然黑色一开始是完全透明的，但是在渐变的中途它已经是深灰色了。)

所以解决方案是使用结束颜色#c8dc9a 的透明版本作为开始颜色，以 rgba 形式。这是 rgba(200,220,154,0)。弹出项也是如此，颜色变为 rgba(226,154,14,0)。

nav ul {
    background: -webkit-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 100%);
    background: -moz-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 100%);
...
nav ul li:hover {
    background: #e29a0e;
    background: -webkit-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
    background: -moz-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
...

顺便说一句，最好把无前缀版本的渐变样式放在底部，在所有有供应商前缀的之后。只有这样，您才能确定可以使用正式定义的浏览器的浏览器确实可以使用。

2)

拒绝发挥作用的不是边距或填充，而是文本缩进。所以我删除了它并向内部列表添加了一些填充和边距，以确保它看起来保持相同。

参见 demo fiddle .