CSS:菜单在Firefox中以正确的空间显示 [英] CSS: menu is displayed with right space in Firefox
问题描述
我刚开始使用CSS并创建了一个下拉菜单.在Chrome和IE中，一切看起来都不错，但是在Firefox中，我遇到了两个问题:
I have just started with CSS and have created a dropdown menu. Everything looks good in Chrome and IE, but with Firefox I run into two problems:
1)渐变不是Chrome或IE中的浅绿色，而是较重/较暗的灰色.
1) The gradient is not the light green as in Chrome or IE, but a heavier/darker grey.
2)菜单右侧显示了额外的7px.这些7px不仅是空白空间，因为它具有我的nav ul元素的背景，但它也不是任何li元素的一部分(尽管可能是由其引起的).
2) The menu is displayed with an extra 7px on the right side. These 7px are not just empty space, as it has the background of my nav ul element, but it is not part of (though maybe caused by) any li elements.
关于第二个问题，我发现Firefox在li元素周围添加了空格，因此我在HTML代码中的li元素之前和之后添加了注释代码.我是否需要调整边距，填充或在CSS中显示?
Regarding the second issue, I have found that Firefox adds space around li elements, and I therefore added comment codes before and after the li elements in the HTML code. Do I need to adjust my margin, padding or display in my CSS instead?
希望有人可以在这里帮助我！
Hope someone can help me out here!
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;
}
推荐答案
1)
这是Firefox处理transparent关键字的一个缺陷.它与rgba(0,0,0,0)一样对待，因此颜色从黑色变为浅绿色. (当然，黑色一开始是完全透明的，但是在渐变的一半处，它已经是深灰色了.)
This is a flaw in Firefox's handling of the transparent keyword. It treats it the same as rgba(0,0,0,0), so the colour goes from black to light green. (Of course the black is fully transparent at first, but halfway down the gradient it's already dark grey.)
因此解决方案是将结束色#c8dc9a的透明版本用作rgba形式的开始色.这是rgba(200,220,154,0).弹出项相同，颜色变为rgba(226,154,14,0).
So the solution is to use the transparent version of the end colour #c8dc9a for the start colour, in rgba form. This is rgba(200,220,154,0). Same for the popup items, where the colour becomes 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%);
...
顺便说一句，最好在所有供应商前缀的版本之后，将无前缀版本的渐变样式放在底部.只有这样，您才能确定可以使用正式定义的浏览器的确可以使用.
By the way, it's better to put the unprefixed version of the gradient style on the bottom, after all the vendor-prefixed ones. Only then can you be sure that a browser which can use the formally defined one, actually does.
2)
拒绝弹奏的不是页边距或填充，而是文本缩进.因此，我删除了它，并在内部列表中添加了一些填充和边距，以确保其外观相同.
It's not the margin or the padding that refuses to play nice, it's the text-indent. So I removed it and added some padding and margins to the inner list, to ensure it kept looking the same way.
请参见演示小提琴.
这篇关于CSS:菜单在Firefox中以正确的空间显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
