调整窗口大小后，右浮动元素的显示在Chrome中变得混乱了吗？

Question

我的网站页脚中有一个元素浮动到右侧，并且效果很好，除了在Chrome中，当我调整窗口大小时，我有某种样式将显示设置为无浮动块（请查看此处的示例），但是问题是，即使将float：right应用于窗口，当我将窗口重新调整为大尺寸时，该元素也会显示在页脚中其他元素的下方。 奇怪的是...取消选中float：right样式，然后在检查器中再次检查将元素返回到其正常位置。 有人知道这可能是什么造成的吗？

Answer 1

您的Twitter链接很可能会引起一些奇怪的事情，如果您不介意将cali文本托管在其余文本的上方，则可以将其移动为代码中的第一个元素，这将解决您调整大小的问题。

或者，由于您似乎正在使用twitter bootstraps网格，因此可以像下面这样使用其类：

<footer class="container" role="footer" style="display: block;">
    <span id="copyright" class="col-xs-12 col-sm-4 text-left">©2013 Anton Pugachevsky</span>
    <span id="social" class="col-xs-12 col-sm-4 text-center">
        <a href="http://twitter.com/antonpug">
            <img src="http://antonpug.com/wp-content/uploads/twitter-social-icon.png" />
        </a>
    </span>
    <span id="random-blurb" class="col-xs-12 col-sm-4 text-left">Hosted with ♥ in California</span>
</footer>

Answer 2

使用text-align：right; 在父元素上，仅使用float：left; 在需要的子元素上或使用其他类型的对齐方式。

这更多是一种解决方法，而不是解决方案。 这个问题似乎是某种chrome样式的刷新错误，因为重新获得浮动样式或刷新页面可以解决此问题。