在 Chrome 中再次上下调整响应式网站的大小不会重置某些元素答案

【问题标题】：Resizing a responsive site down and up again in Chrome doesn't reset some elements在 Chrome 中再次上下调整响应式网站的大小不会重置某些元素
【发布时间】：2015-06-22 13:58:09
【问题描述】：

我一直在使用 Wordpress 在网站 http://www.realestatedevon.co.uk/ 上工作。

该网站响应迅速并且通常可以很好地工作，但在 Chrome 中存在一个烦人的问题。当您缩小浏览器然后备份时，侧边栏和右侧标题内容不会重置位置 - 直到点击刷新。

我发现如果我在检查器中选择 div .site-main .sidebar-container 样式并取消勾选 position:absolute 并重新勾选它，这也会恢复它。我还没有找到对右侧的标题文本执行相同操作的方法。

我对 web 开发比较陌生，所以我可能会做一些愚蠢的事情，但感谢您的帮助。

【问题讨论】：

标签： html css wordpress google-chrome

【解决方案1】：

类.site-main .sidebar-container 有position: absolute 并且没有right: 0。另外，父容器没有position: relative。

请阅读http://www.w3schools.com/css/css_positioning.asp

【讨论】：

谢谢，这绝对让我走上了正轨，问题是我需要让侧边栏与顶部菜单对齐。我也会尽快看一下css_positioning的文章！
Brill，我在侧边栏添加了一个 right:3% 样式，并且已经对其进行了排序:) 现在我需要对标题进行排序，希望这是一个类似的问题或我能弄清楚的问题来自 w3schools 文章。

【解决方案2】：

将正确的属性值设置为绝对定位的 div。调整大小后，它将自动定位。无需添加JS。

.site-main .sidebar-container {
  right: 6%;
}

【讨论】：

【解决方案3】：

我建议您最好定义您的规则，而不是为一个相当有趣的 CSS 问题寻求 javascript 解决方案。当元素具有fixed 或absolute 位置值时，最好是非常明确的。在每个媒体查询中，尝试指定 top 和 right 值。

【讨论】：

谢谢，我现在正在玩顶部和右侧的定位（请参阅上面的评论：将侧边栏与菜单对齐）。
看起来侧边栏现在可以工作了，为您的输入喝彩！ :) 我还有很多要学的东西
没问题。祝你好运:)

【解决方案4】：

如果您有地方放置自己的自定义 js 代码，这就是您所需要的：

$('.headerLogoRealEstate').on('resize', function(){
    if($(window).width>911){
        $(this).css('position', 'absolute');
    }
});

这将适用于调整大小，如果您的窗口宽度大于 911 像素，它会将 position:absolute 放在标题上。

【讨论】：

为这个建议干杯。如果可能的话，我想先使用 CSS，但是这种替代方法很值得了解:)
我最近在 js 中编写了很多代码，所以这是我想到的第一件事：D Css 可能是更简单更好的解决方案 :)