CSS响应形状问题答案

【问题标题】：CSS Responsive Shape IssueCSS响应形状问题
【发布时间】：2014-11-27 05:30:14
【问题描述】：

我在我的网站上添加了一个固定的顶部搜索和社交栏，在桌面上看起来都很棒。它应该是响应式的，但是，我在移动查看（平板电脑/手机等）时遇到了问题，它正在失去其形状。

栏本身效果很好，搜索部分也是如此。是社交 CSS 部分导致形状在移动查看时失败。

它应该是这样的：

以下是它在移动设备上的外观：

代码如下：

.topbar .social {
    float: right;
    display: inline-block;
    margin-left: 15px;
    margin-top: -30px;
    margin-bottom: -60px;
}
.topbar .social a {
    display: inline-block;
    width: 34px;
    height: 60px;
    padding-top: 8px;
    position: relative;
    background-color: #f293b5;
    float: left;
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-left: 5px;
}
.topbar .social a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0; 
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
    border-bottom: 13px solid #fff;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
}

所有代码和 HTML 都可以在这里找到：http://jsfiddle.net/20tL16v3/ （忽略额外的 Wordpress 附加功能，例如显示小部件附加功能。）

这快把我逼疯了！任何人都可以帮我纠正这个问题，或者指出我可能出错的方向吗？提前致谢。

【问题讨论】：

如果你能帮我在 jsfiddle 上设置它真的很有帮助。
你能把你的 HTML 也包含在上面吗？
看起来是 z-index 的问题
感谢您的回复。
@Larz - 尝试在此处添加 HTML 并一直说它的字符太长，但您可以在源代码中找到它 here。

标签： html css responsive-design shape css-shapes

【解决方案1】：

您有一个媒体查询将标题的溢出设置为隐藏。

@media only screen and (max-width: 1139px) {
  .site-inner, .wrap {
    max-width: 960px;
    overflow: hidden;
    }
}

将其设置为overflow: visible;，您应该可以看到您希望在缩小窗口时看到的功能区。

如果您找不到该媒体查询，如果您不顾一切，只需将其设置在您的 css 中：.site-inner, .wrap { overflow: visible !important; }

【讨论】：

我正想问这是否与媒体查询有关！ :) 非常感谢，它已经解决了这个问题。万岁。

【解决方案2】：

尝试使用：

.topbar .social { float: right; overflow:hidden; display: inline-block; margin-left: 15px; margin-top: -30px; margin-bottom: -60px; }

还要确保您使用了视口元标记 - 您可以通过快速搜索找到更多信息。

我希望这会有所帮助，请告诉我。干杯。

【讨论】：

非常感谢您的回复。但是，添加溢出并没有解决问题。