html - 响应式网站——将浏览器调整为较小宽度然后再调整回较大宽度时的布局问题

Question

我正在制作我的第一个完全响应式网站，但遇到了一个问题。该站点似乎在 Firefox 和资源管理器中按预期工作。给我带来问题的浏览器是 chrome 和 safari。

在页面底部的简介/登陆页面 ( http://designerdsite.com/new/ ) 上有两个部分，一个标题为“我有技能”，另一个标题为“他们爱我，因为他们”。当我加载页面时(无论浏览器宽度是多少)它都会正确加载，但是在浏览器宽度缩小然后重新打开布局重新定位后。在“技能”部分，右侧的 div 低于左侧的 div。在“他们爱我”一栏中，文字位于图片下方。似乎出于某种原因，容器 div 的宽度没有被理解。也许它是别的东西。我真的不确定这里发生了什么，非常感谢任何人的建议。谢谢!!

Answer 1

我在我的网站上发现了一个类似的问题。据我所知，Chrome/Webkit 似乎在 float 元素的正确(重新)定位方面存在问题。

所以有 2 个(也许更多)选项:
1. 您可以使用 Javascript 强制浏览器重新呈现(而不是重新加载!!!)这些元素(例如，通过将显示属性更改为无并返回 block )
2. 使用其他定位变体，如“inline-block”或“table-cell”