刚开始为我的website 做一些跨浏览器测试，我的 Firefox 主页出现了一些奇怪的事情。
滑块看起来比它下面的缩略图小，缩略图相互接触，当您调整浏览器大小时，缩略图不会缩小（它们只是重叠更多）。如果您在 Chrome、Safari 或 Opera（甚至是 iOS 上的 chrome/safari）中查看该网站，滑块的宽度与下面的缩略图相同，缩略图之间有空间，并且在调整浏览器大小时一切都可以正常缩放。
当我将鼠标悬停在缩略图（CSS3 动画）上时，我也注意到一些滞后，仅当我在 Firefox 中时。
什么给了？我做错了什么，或者 Firefox 在响应式网站上变得愚蠢？如果重要的话，我正在使用this framework
编辑：此外，如果您单击任何缩略图，这些页面上的图像看起来很好并且可以正确缩放。好像只是首页受到了影响。
【问题讨论】：
标签： html css firefox responsive-design fluid-layout
欢迎来到令人沮丧的 Web 开发世界。每个浏览器都以不同的方式解释代码，这是我们行业的头号挑战。即使是相同的浏览器基础，不同版本的解释也不同。 Internet Explorer 一直是设计最差的浏览器，因为它通常比其他浏览器落后 2-3 次迭代。而且您必须担心 IE，因为它与大多数 PC 一起提供，它是最流行的浏览器。
因此，您必须考虑您的受众是谁，并在最适合该平台的平台上进行设计。例如，如果您的受众是平面设计师，那么您可以安全地为现代浏览器进行开发。但是，如果您的受众是普通的、不熟悉技术的 PC 用户，您就必须为 IE 量身定制您的设计。 （对不起）。
您可以在开发过程中使用http://browsershots.org/ 之类的工具来查看您的网站在各种浏览器中的运行情况。或https://browserlab.adobe.com/en-us/index.html#
然后，您必须了解“黑客”以使您的网站显示相似，无论网络平台如何。这是一个巨大的学科领域，你必须学习和研究，直到你理解它为止。
但话虽如此，当今最重要的设计问题是制作一个适应更大和更小屏幕站点的响应式网站。
手机是新的黑色。展望未来，您应该始终牢记移动开发，除非您知道您的受众不是移动类型，这是例外，而不是规则。
【讨论】：
为缩略图添加了 max-width="100%" height="auto" width="100%" 到我的 img 标签中，它似乎正在工作
【讨论】：