li and a element styling issue with Chrome after clicking a link

Question

I have a simple menu that works fine in Firefox, but when using Chrome the links move around when you click on them and so it breaks the styling. I read from somewhere that display: block; on a element would fix this, but it didn't.

You can see a demo here: https://jsfiddle.net/dewg1L8y/1/ Use Chrome and click the links to see what I mean.

Also any idea how to remove the text wrapping in Chrome? It stays on one line in Firefox.

html:

<ul>
    <li>
        <a href="#">link 1</a>
    </li>
    <li>
        <a href="#">second link</a>
    </li>
    <li>
        <a href="#">3</a>
    </li>
</ul>

css:

li {
    display: inline-block;
    list-style: none;
}

a {
    display: block;
    color: #000;
    padding: 0 10% 0 10%;
    text-decoration: none;
}

Answer 1

Just change the padding from 10% to 10px or more for the a tag

Answer 2

in your css change to have li { display: inline; list-style: none; } a { color: #000; padding: 0 10% 0 10%; text-decoration: none; }

this will still display inline and the style will stay the same whatever the browser