Question

我只编写了3个月的时间，而且我是一个新手，所以请在回答时考虑到这一点。

我的菜单上的li项目中Firefox和Chrome之间存在差异/填充差异。通过去除徽标上的边距底部并用填充替换它，我能够解决窗口宽度超过1040px的问题。然而，在宽度<= 1040px时，问题仍然存在。（在Chrome中，li项很好地排列;在Firefox中似乎存在填充问题。）

以下是网站：http://www.noticeeverything.com/home/

这是HTML（仅用于菜单）：

<div id="menu">
    <ul class="main">
        <li><a id="home" href="http://www.noticeeverything.com/home/">HOME</a></li><li><a href="http://www.noticeeverything.com/about/">ABOUT</a></li><li class="media"><a href="#">MEDIA</a><ul class="sub1"><li><a href="http://www.noticeeverything.com/audio/">AUDIO</a></li><li><a href="http://www.noticeeverything.com/video/">VIDEO</a></li><li><a href="http://www.noticeeverything.com/photos/">PHOTOS</a></li><li><a href="http://www.noticeeverything.com/press/">PRESS</a></li></li></ul><li class="media-click"><a href="#">&#9776;MEDIA</a><ul class="media-sub-click"><li><a href="http://www.noticeeverything.com/audio/">AUDIO</a></li><li><a href="http://www.noticeeverything.com/video/">VIDEO</a></li><li><a href="http://www.noticeeverything.com/photos">PHOTOS</a></li><li><a href="http://www.noticeeverything.com/press/">PRESS</a></li></ul></li><li><a href="http://www.noticeeverything.com/schedule/">SCHEDULE</a></li><li><a href="http://www.noticeeverything.com/store/">STORE</a></li><li><a href="http://www.theonlycozyplaceintheworld.wordpress.com" target="blank">NEWS</a></li><li class="contact last"><a href="#">CONTACT</a><ul class="sub2"><li class="fan-mail"><a href="#">FAN MAIL</a></li><li class="booking-mail"><a href="#">BOOKING</a></li><li class="management-mail"><a href="#">MANAGEMENT</a></li></ul></li><li class="contact-click"><a href="#">&#9776;CONTACT</a><ul class="contact-sub-click"><li class="fan-mail"><a href="#">FAN MAIL</a></li><li class="booking-mail"><a href="#">BOOKING</a></li><li class="management-mail"><a href="#">MANAGEMENT</a></li></ul></li></ul>
</div>
    <div id="mobile-menu">
    <li class="menu-button"><a href="#">&#9776;MENU</a>
        <ul class="sub3">
            <li><a id="home" href="http://www.noticeeverything.com/home/">HOME</a></li>
                            <li><a href="http://www.noticeeverything.com/about/">ABOUT</a></li>
            <li><a href="http://www.noticeeverything.com/audio/">AUDIO</a></li>
            <li><a href="http://www.noticeeverything.com/video/">VIDEO</a></li>
            <li><a href="http://www.noticeeverything.com/photos/">PHOTOS</a></li>
            <li><a href="http://www.noticeeverything.com/press/">PRESS</a></li>
            <li><a href="http://www.noticeeverything.com/schedule/">SCHEDULE</a></li>
            <li><a href="http://www.noticeeverything.com/store/">STORE</a></li>
            <li><a href="http://www.theonlycozyplaceintheworld.wordpress.com" target="blank">NEWS</a></li>
            <li><a href="http://www.noticeeverything.com/contact/">CONTACT</a></li>
        </ul>
    </li>
    </div>

这里是我的CSS的链接（抱歉没有发布，但格式在这里很奇怪）： http://www.noticeeverything.com/css/responsive.css

Firefox和Chrome之间的填充/边距差异

0 个答案: