第一个菜单项'跳跃'在Chrome中

时间:2014-12-11 16:20:56

标签: html css

为什么第一个菜单Iteam(.chosen)会在Chorme Browser中刷新?在我看来,它改变Padding-Right和Padding Padding-Bottom。请检查代码帮我解决这个恼人的问题。它在Firefox中很好

<body>
            <header>
                <div class="con_header">
                    <h1> SITE NAME</h1>
                    <nav>
                        <ul>
                            <li class="chosen"><a href="">HOME</a></li>
                            <li><a href="">ABOUT</a></li>
                            <li><a href="">SERVICES</a></li>
                            <li><a href="">PORTFOLIO</a></li>
                            <li><a href="">CONTACTS</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
        </body>


   Css part of the code:-

<style type="text/css">
    header {
        background-color: #202628;
        height: 80px;
        color: #e7e7e7;
        font-family: 'Roboto Condensed', sans-serif;
    }

    .con_header {
        width: 1170px;
        margin: 0 auto;
    }

        .con_header h1 {
            float: left;
            width: 500px;
        }

        .con_header nav {
            float: right;
            width: 600px;
        }

        .con_header::after {
            content: '';
            display: block;
            clear: both;
        }

        .con_header ul {
            margin-top: 26px;
            padding: 0;
        }

        .con_header li {
            display: inline;
        }

            .con_header li a {
                color: #e7e7e7;
                text-align: center;
                text-decoration: none;
                padding: 32.5px 8px;
                margin: -4px;
            }

                .con_header li a:hover {
                    color: #e7e7e7;
                    background-color: rgb(232,76,61);
                    text-align: center;
                    text-decoration: none;
                    padding: 32.5px 8px;
                    margin: -4px;
                }

    .chosen {
        color: #e7e7e7;
        background-color: rgb(232,76,61);
        text-align: center;
        text-decoration: none;
        padding: 32.5px 8px;
    }
</style>

0 个答案:

没有答案