Question

我在Chrome 35中的“配置”（最后）列表项目存在问题（IE9,10,11，FF 30 - 确定）。当窗口宽度> 480px时，最后一个列表正确显示; 窗口宽度＆lt; = 480px时，最后一个列表也正确显示;

但是一旦我从ex：400px调整窗口大小调整到600px - 列表项就会下降。

有人知道为什么会这样吗？（我现在知道如何解决它 - 使用绝对位置而不是浮动权利。只是好奇它为什么会发生，看起来像Chrome缺陷）

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>html css</title>

    <link rel="stylesheet" href="css/style.css"/>

</head>
<body>
<header>
    <div class="logo">
        <a href="#"></a>

        <h1>Contacts Manager</h1>
    </div>
    <div class="search-contact">
        <input type="text" placeholder="Search contact here">
        <button>Search</button>
    </div>
</header>

<nav class="tabs">
    <ul>
        <li><a href="#">All</a></li>
        <li class="active"><a href="#">Favourite</a></li>
        <li><a href="#">My Scrum team</a></li>
        <li><a href="#">Scrum teams</a></li>
        <li><a href="#">Configure</a></li>
    </ul>
</nav>

</body>
</html>

的CSS：

ul {
    list-style-type: none;
}

h1, h2, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

header {
    display: block;
}

header input {
    border: 1px solid #aaa;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 25px;
    margin-right: 0;
}

header button {
    font-size: 12px;
    color: #fff;
    margin-left: 0;
    background-color: #ED1C24;
    border: 1px solid #990000;
    padding: 1px 15px;
}

header .logo {
    display: inline-block;
}

header .logo > a:before {
    content: url(../img/serena_logo.gif);
}

header .logo > h1 {
    display: inline-block;
    font-size: 27px;
    margin: -2px 0 0 10px;
    vertical-align: top;
}

header .search-contact {
    display: inline-block;
    vertical-align: top;
    margin-top: 3px;
    float: right;
}

nav li.active {
    background: linear-gradient(to bottom, #e51920 1%, #a90507 100%);
}

nav li:not(.active):hover {
    background: linear-gradient(to bottom, #356aa0 0%,#356aa0 100%);
}

nav li:not(.active):hover a {
    color: #fff;
}

nav li.active a {
    color: #fff;
}

nav.tabs {
    clear: both;
    background: linear-gradient(to bottom, #646464 0%, #323232 100%);
    margin-bottom: 15px;
}

nav.tabs ul {
    display: block;
}

nav.tabs a {
    color: #eee;
}

nav.tabs ul > li {
    display: inline-block;
    padding: 10px 20px;
    margin-right: -4px;
}

nav.tabs ul > li a {
    display: block;
    font-weight: bold;
    text-decoration: none;
}

nav.tabs ul > li:last-child {
    float: right;
    margin: 0;
}

@media all and (max-width: 670px) {

    nav.tabs ul > li {
        padding: 10px 7px;
    }
}

@media all and (max-width: 480px) {

    nav.tabs ul > li {
        padding: 5px 0 5px 10px;
        display: block;
        float: none;
        margin-right: 0;
    }

   nav.tabs ul > li:last-child {
        float: none;
    }
}

Answer 1

更新(max-width: 480px)的媒体查询语法，如下所示。

@media all and (max-width: 480px) {
 nav.tabs ul > li {
    padding: 5px 0 5px 10px;
    display: block;
    float: none !important;
    margin-right: 0;
 }
 nav.tabs ul > li:last-child {
    display:inline-block !important;
    width:100%;
    box-sizing:border-box;
 } 
}

DEMO

Answer 2

这是一个非常奇怪的错误。我想您可能想将其提交给Chrome。我通过切换导致问题的li的位置来解决它：

http://jsfiddle.net/mN7mZ/20/

对于HTML：

<ul>
    <li><a href="#">Configure</a></li>
    <li><a href="#">All</a></li>
    <li class="active"><a href="#">Favourite</a></li>
    <li><a href="#">My Scrum team</a></li>
    <li><a href="#">Scrum teams</a></li>
</ul>

CSS：

nav.tabs ul > li:first-child {
    float: right;
    margin: 0;
}

@media all and (max-width: 480px) {
    nav.tabs ul > li:first-child {
        float: none;
    }
}

因此，第一个列表项是右侧的列表项。在浏览器调整回宽度后，它似乎会回到正确的位置。

编辑：

显然第一个链接现在会出现在480px以下的错误位置，所以我不得不做一些疯狂的事情让它再次回到底部。见http://jsfiddle.net/mN7mZ/21/

在Chrome中使用@media后，在显示块后不显示内联块

2 个答案: