Question

我做了一个菜单，我使用过chrome但现在当我尝试使用firefox时，我得到了项目之间的间距

镀铬 In Chrome

在Firefox中 In Firefox

这里是CSS

HTML：

 <nav>
        <ul class="menu">
            <li id="accueil"><a href="./index.html" class="iconeAccueil">Accueil</a></li>
            <li id="bureau"><a href="./bureau.html">Bureau</a></li>
            <li id="actualites"><a href="./actualites.html">Actualités</a></li>
            <li id="partenaires"><a href="./partenaires.html">Partenaires</a></li>
            <li id="contact"><a href="./contact.html">Contact</a></li>
            <li id="liens"><a href="./liensutiles.html">Liens utiles</a></li>
            <li id="Liens"><a href="#liens">lien+subtitles</a>
                    <ul class="sousmenu">
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                    </ul>
            </li>

        </ul>
    </nav>

链接中的CSS。

感谢您的帮助。

Answer 1

使用内联块可以将元素之间的任何文本/空格视为文本，并相应地设置它们的样式。一个快速修复（如果是纯图像）是将font-size设置为0（由于你有实际文本，这对你不起作用）。

最简单的解决方案是，如果您不关心拥有完美外观的代码并让它工作，那就是删除代码中的所有额外空格。我对你的代码做了哪些工作：

<ul class="menu">
    <li id="accueil"><a href="./index.html"     class="iconeAccueil">Accueil</a></li><li id="bureau"><a href="./bureau.html">Bureau</a></li><li id="actualites"><a href="./actualites.html">Actualités</a></li><li id="partenaires"><a href="./partenaires.html">Partenaires</a></li><li id="contact"><a href="./contact.html">Contact</a></li><li id="liens"><a href="./liensutiles.html">Liens utiles</a></li><li id="Liens"><a href="#liens">lien+subtitles</a><ul class="sousmenu"><li id="Liens"><a href="#liens">Liens utiles</a></li><li id="Liens"><a href="#liens">Liens utiles</a></li><li id="Liens"><a href="#liens">Liens utiles</a></li><li id="Liens"><a href="#liens">Liens utiles</a></li></ul></li>
</ul>

https://jsfiddle.net/mpc1o2gf/1/

Answer 2

这是inline-block元素的常见问题。默认情况下，这些元素周围有一些间距。这有点违反直觉，但默认行为。

对此有一些修复。我首选的是浮动li元素。有一些警告。阅读this以获得完整的理解。

Firefox中菜单项之间的空格

2 个答案: