CSS 在 Chrome 中刷新时中断

Question

我的网站有一个导航栏，最初在 chrome 中加载时看起来像这样：

|      |      |           |
| Home | News | Solutions | etc...
|      |      |           |

现在由于某种原因，如果我加载此页面，然后继续在 chrome 中刷新页面（不更改任何内容），它最终会中断并看起来像这样：

|   |   |   |   |
|  HomeNewsSoultionEtc...
|   |   |   |   |

使用< a > 属性包含的链接不再扩展它们所包含的< li >。我假设它是 chrome 的计算错误，因为我已经在 firefox、IE 和 safari 中对此进行了测试而且效果很好。

我的代码如下：

<div class="row">

            <div class="col-md-4 logo_box">

                <p><a href="..."><img src="..."></a></p>

            </div>

            <div class="col-md-8 nav_box">

                <ul>

                    <li onclick="location.href='...';" class="mainlink"><a class="ml_text" href="...">Home</a></li>
                    <li onclick="location.href='...';" class="mainlink"><a class="ml_text" href="...">News</a></li>
                    <!-- etc... -->

               </ul>

           </div>
</div>

CSS：

.nav_box
{
    height: auto;
    width: 80%;
    margin: 0%;
    margin-top: auto;
    float: right;
}

.nav_box li
{
    width: auto;
}

.nav_box ul
{
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    width: 100%;
    text-align: center;
}

.mainlink:hover
{
    background-color: #b3babf;
}

Answer 1

清除您的浏览数据。您正在缓存的 CSS 和您自己的 CSS 之间进行斗争。