仅限

Question

我的WordPress静态页面看起来似乎应该在我测试过的每台浏览器和机器上查看，除了Chrome上的MacBook Pro，右侧灰色侧边栏有两种不需要的行为：

1. 太靠近左侧div块，
2. 太薄，底部的内部社交图标（见图片）不会强制父容器的宽度。

灰色侧边栏的html如下所示：

<div class="three columns responsive valign-top background-med-gray" style="margin:0;padding:10px;">

    ...
    ...

    <div id="follow-us">
        <h2 class="TTT margin-top-20" style="text-align: center;">Follow Us</h2>
        <a href="https://www.facebook.com/TTT"><div id="by-fb" class="social-sprite" ></div></a>             
        <a href="https://instagram.com/ttt/"><div id="by-in" class="social-sprite" ></div></a>
        <a href="http://www.youtube.com/c/TTT"><div id="by-yt" class="social-sprite" ></div></a>

    </div>

</div>

我的社交图标样式如下所示：

div#follow-us{
display:inline-block;
bottom: 0px;
}
div.social-sprite{
    background-image:url('/wp-content/uploads/2016/03/social_sprite.png');
    background-repeat:no-repeat;
    margin:10px auto 10px 20px;
    display:inline-block;
}
div#by-fb{
    position:relative;
    top:20px;
    width:206px;
    height:41px;
    background-position:0px 0px;
}
div#by-in{
    position:relative;
    top:20px;
    width:206px;
    height:41px;
    background-position:-206px 0px;
}
div#by-yt{
    position:relative;
    top:20px;
    width:206px;
    height:41px;
    background-position:-414px 0px;
}

但真正的问题如下图所示。在第一张图片中，灰色侧边栏（ WHAT'S HOT ）看起来像我希望它看起来。这是它在大多数非移动屏幕中呈现的方式：



我的一位测试人员使用Chrome浏览器报告了MacBook Pro上的不同行为（Retina，13英寸，2012年末及以后的显示器具有2560 x 1600原始分辨率，每英寸227像素）。正如您所看到的，灰色侧边栏太靠近左侧，它太薄了，正如您在第三个图形中看到的那样，由于某种原因，社交图标突破了侧边栏。