Question

我有以下HTML和CSS。据我所知，它是有效的，应该工作，确实它在IE和FF工作没有问题。但是Chrome最近破了。当我在Chrome中调整大小时，它会根据媒体查询规则首先折叠，但是再次展开时，右手内容会向下移动。

如果我检查.side元素，重新应用（取消勾选然后勾选）position: absolute，然后重新绘制并修复问题。

我的代码是否有问题，还是我需要在Chrome中引发错误？

此外，这只是最近才打破（我已经开发了一段时间）但由于Chrome的自动更新，我不确定我最近是否已更新。

HTML：

<nav id="site-subnav">

    <a href="#">Features</a>
    <a href="#">Technical</a>
    <a href="#">Pricing</a>

    <div class="side">
        <a href="#" class="button clear positive">Try It Free</a>
        <a href="#" class="button clear">Buy</a>
    </div>

</nav>

CSS

#site-subnav
{
    background: #eee;
}

#site-subnav a {
  display: inline-block;
}

#site-subnav .side
{
    display: inline-block;
    position: absolute;
    right: 10px;
}

@media (max-width: 500px)
{
    #site-subnav a
    {
        display: block;
    }

    #site-subnav .side
    {
        position: relative;
        right: 0;
    }
}

Answer 1

将top:7px添加到.side。这将使其保持在正确的y偏移量。

Answer 2

请参阅我的代码。

http://codepen.io/anon/pen/LdyJq

我将导航位置更改为相对位置。

Answer 3

你可能是对的，我无法弄清楚你的代码究竟出了什么问题。它在FF中运行良好，但Chrome在调整大小后似乎会使右侧变得怪异。

尽管如此，这可能是一种可接受的解决方法。在这个例子中，你只需将A元素包装在另一个DIV中，然后在相对的两侧浮动两个内联块DIV。当宽度<500px时，DIV和A元素将成为块。使用clearfix保留#site-subnav height。

CodePen：http://codepen.io/anon/pen/Drbcq

HTML：

<nav id="site-subnav">
  <div class="lside">
    <a href="#">Features</a>
    <a href="#">Technical</a>
    <a href="#">Pricing</a>
  </div>
  <div class="rside">
    <a href="#" class="button clear positive">Try It Free</a>
    <a href="#" class="button clear">Buy</a>
  </div>
  <div class="cf"></div>
</nav>

CSS：

#site-subnav
{
    background: #eee;
}

#site-subnav .rside, #site-subnav .lside
{
    display: inline-block;
    padding: 0 10px;
}

#site-subnav .rside
{
    float:right;
}

#site-subnav .lside
{
    float:left;
}

@media (max-width: 500px)
{
    #site-subnav a,
    #site-subnav .rside,
    #site-subnav .lside
    {
        display:block;
        float:none;
    }
}

/* clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

调整Chrome大小会破坏布局

3 个答案: