Geek asks and answers

Does Firefox calculate blocks anymore?

I have a strange problem in the navigation menu that only appears in Firefox (works fine in IE7, 8, 9, 10 and Chrome). The links in the menu are displayed in blocks, however they are calculated more in Firefox (more width) than in any other browser, and therefore they do not align properly. It's strange that after the links have been clicked, even if it is a right-click, Firefox puts them in line with how they should be.

CSS was reset, and this problem occurs in Firefox, so I think this is a Firefox error?

<nav>
    <ul id="primary-nav">

        <li><a id="nav-home" href="/wordpress">HOME</a></li>
        <li><a id="nav-work" href="/wordpress/work">WORK</a></li>
        <li><a id="nav-about" href="/wordpress/about">ABOUT</a></li>
        <li><a id="nav-contact" href="/wordpress/contact">CONTACT</a></li>
        <li><a id="nav-blog" href="">BLOG</a></li>

    </ul>
</nav>


ul#primary-nav li {
    float: left;
    list-style-type: none;
    background: none;
    padding: 0;
    margin-left: 25px;
}

ul#primary-nav li a {
    font-size: 1.5em;
    display: block;
    padding-top: 40px;
}

ul#primary-nav li a#nav-home {
    background: url('./images/nav-home-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-work {
    background: url('./images/nav-work-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-about {
    background: url('./images/nav-about-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-contact {
    background: url('./images/nav-contact-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-blog {
    background: url('./images/nav-blog-button.png') top center no-repeat;
}

ul#primary-nav li a:first-letter {
    font-size: 1.3em;
}
+1
source share
1 answer

: firefox, , : .

2007 : https://bugzilla.mozilla.org/show_bug.cgi?id=385615. 2013 - . .

, 2011 , .

- reflow, (: kizu)

@-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }

.test {-moz-animation: bugfix 0.001s;}

, (http://jsfiddle.net/6eYu6/1/):

<div><a href="#">HOME</a></div>
<div><a href="#">WORK</a></div>

div{float: left;}
a{display: block;}
a:first-letter {font-size: 1.3em;}​

Chrome ( ). Firefox - , a .

:

. , . .

href (http://jsfiddle.net/6eYu6/2/), . .

(return false jQuery) . focus ( href). focus .

float inline ( , ). :first-letter .

font-size , .

( firefox, ) , .

hover, , .

, 100% ().

+2

More articles:


All Articles