Question

我的HTML / CSS遇到了一些非常奇怪的事情。

当我重新加载页面有时时，我的一个元素最终定位在它应该位于的位置（垂直居中），有时它最终会出现在视口之外（类似700px以上）页面顶部）。

页面在不同页面加载时的行为方式不同只是奇怪的一半。如果我删除body的{{1}}属性并在网络检查器中重新添加，则一切都会神奇地自行修复。（height: 100%是此元素的直接父级。）

我的直觉告诉我，奇怪的第一部分的答案是，一些竞争条件正在发生，导致事情以不同的顺序随机发生。但是，我不确定可能是什么或者它为什么会影响事物。

什么可能导致从元素中删除和重新添加相同的CSS属性以导致页面布局发生变化？

不幸的是，我无法在jsfiddle中重现，但这里有一个这样的GIF：

gif

编辑：谜题的新篇章。我发现这只发生在Chrome中，并且只有在网页上加载了一个空哈希值时才会发生。

http://myurl.com正常工作
http://myurl.com/#foo正常工作
http://myurl.com/# 间歇性地出现问题

有一种解决方法可以触发@Huangism在下面发布的重新流程，但是有一些警告（一些复杂的时间准确触发重新流动并触发工作页面上的重新流动会导致闪光内容）。

Answer 1

我认为这是一个奇怪的Chrome错误，试试这个

显示内容后，使用jquery - 隐藏包含该内容的div，检查它的高度并显示它

假设$el是你的jquery div元素

$el.hide().height();
$el.show();

尝试一下，看看它是否解决了问题

Answer 2

尝试使用js或jquery设置高度。

看起来当您重新加载页面时，您的CSS属性会通过style =＆＃34;＆＃34;设置为您的body标签。然后迅速删除。它可能是你的js中的东西

Answer 3

好悲伤这很黑。仍然会喜欢解释究竟发生了什么以及处理它的正确方法，但是......

在确定某个空的哈希被附加到URL之后是问题的一部分时，可接受的解决方法似乎是使用html5历史API完全删除空哈希（如果存在）。

我的代码看起来像这样：

// when the page is ready...
$(function() {
    // if the url ends with a "#" (and the browser supports it...)
    if(window.location.href && window.location.href.indexOf('#') == window.location.href.length - 1 && window.history) {
        // clear the darn empty hash using the html5 history API
        window.history.replaceState({}, '', './');
    }
});

删除并重新添加CSS属性会更改元素的位置

3 个答案: