Geek asks and answers

Chrome reduced <a> tag width on hover

I built a simple dropdown menu, but in Chrome on hover the tag size is reduced by 3 pixels. (transition effect)

I don't understand where the problem is, here is my css:

#primary {
    width:400px;
    background:yellow;
    height:48px;
    margin:0;
    padding:0;
}

#primary li {
    display:table;
    width:120px;
    float:left;
    border-right:1px solid blue;
    position:relative;
}

#primary li a { 
    display:table-cell;
    text-align:center;
    height:48px;
    vertical-align:middle;
}

#primary #secondary {
    display:none;
    margin:0;
    padding:0;
}

#primary li:hover #secondary {
    position:absolute;
    top:48px;
    left:0;
    background:red;
    display:block;
}

Chrome seems to add additional hidden fields / additions. In FF, IE works.

Online demo: http://jsfiddle.net/A3XDR/

+3
source share
3 answers

A way was found to do this, but this is due to a change in the markup by adding <<20> to the link:

HTML:

<ul id="primary">
    <li>
        <a href=""><span>Nav 1 is long and wraps some</span></a>
        <ul id="secondary">
            <li><a href="">Nav 1-1</a></li>
            <li><a href="">Nav 1-2</a></li>
            <li><a href="">Nav 1-3</a></li>
            <li><a href="">Nav 1-4</a></li>
        </ul>
    </li>
    <li><a href=""><span>Nav 2</span></a></li>
    <li><a href=""><span>Nav 3</span></a></li>
</ul>

CSS

#primary li a { 
    display:table;
    height:48px;
    width: 100%;
}

#primary li a > span {
    display: table-cell;
    text-align: center;
    vertical-align:middle;
    width: 100%;
}

Fiddle | JSBin (for testing IE8 jsFiddle does not work on IE8)

( #primary li display: block, , , : Fiddle | JSBin)

Chrome (~ v26), width: 100%, , , Chrome (~ v32), . Firefox, IE8, IE10, Opera Midori.

( - putvande Lokesh . , .)

+1

:

#primary li a { 
    display:table-cell;
    text-align:center;
    height:48px;
    vertical-align:middle;
}


#primary li a { 
    display:block;
    text-align:center;
    height:48px;
    line-height: 48px;
}

table-cell, width: 100%:

#primary li a { 
    display:table-cell;
    text-align:center;
    height:48px;
    vertical-align:middle;
    width: 100%; 
}
+2

This should do the trick, but I'm not sure why he behaves this way. This, of course, is due to secondary ul, but not sure why.

#primary li a { 
    display:table-cell;
    text-align:center;
    height:48px;
    vertical-align:middle;
    width:100%;
}

Fiddle

+2
source

More articles:


All Articles