html - 调整 Chrome 大小会破坏布局

Question

我有以下 HTML 和 CSS。据我所见，它是有效的并且应该可以工作，实际上它在 IE 和 FF 中工作没问题。然而，Chrome 最近坏了。当我在 Chrome 中调整大小时，它首先会根据媒体查询规则折叠，但当再次展开时，右侧内容会向下移动一行。

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

这里是我的代码有问题还是我需要向 Chrome 提出错误？

此外，这只是最近才出现问题(我已经开发了一段时间)，但由于 Chrome 的自动更新，我不确定我最近是否更新过。

http://codepen.io/mrchris/pen/AJwrI

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 偏移。