调整 Chrome 的大小会破坏布局答案

【问题标题】：Resizing Chrome breaks layout调整 Chrome 的大小会破坏布局
【发布时间】：2014-04-09 12:26:49
【问题描述】：

我有以下 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;
    }
}

【问题讨论】：

标签： html css google-chrome responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

查看我的代码笔。

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

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

【讨论】：

我不相信，如果我在视口恢复到全尺寸时检查它们，那么它们会声明 display: inline-block。它们只能是block，小于一定大小。
啊，我明白你想要什么了。我再看看。

【解决方案3】：

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

也就是说，这可能是一个可以接受的解决方法。在此示例中，您只需将 A 元素包装在另一个 DIV 中，然后将两个内联块 DIV 浮动在相对的两侧。当宽度

代码笔：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;
}

【讨论】：