FireFox 调整窗口大小的响应式布局设计问题答案

【问题标题】：Responsive layout design issue with FireFox re-size windowFireFox 调整窗口大小的响应式布局设计问题
【发布时间】：2012-12-24 02:50:06
【问题描述】：

我在网站设计中使用zurb-foundation 3.2.3 版。它在 Chrome 上运行完美，但在附加的屏幕截图中显示的 FireFox 存在问题。简单地说，当我将浏览器的窗口重新调整到某个较小的宽度时，在 FirFox 中，右侧的某些部分不会显示，如下图所示。 FireFox 中的垂直滚动条也消失了。

以下是页面头部的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  dir="rtl"  lang="ar" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/quran/themed/slate/css/imports.css" />

    <script type="text/javascript" src="/quran/themed/slate/js/libs/modernizr-2.0.6.min.js"></script>



    <!--[if lt IE 9]>
            <![endif]-->


    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>

    <![endif]-->
<title></title>

FireFox 版本：16.0.2，Windows 7 64 位，屏幕分辨率 1366 x 768。

我需要知道如何解决这个问题。

【问题讨论】：

标签： zurb-foundation css firefox responsive-design zurb-foundation

【解决方案1】：

当我将浏览器升级到 17.0 版本时，这似乎是 FireFox 16.0.2 中的一个错误。它工作正常，如以下屏幕截图所示：

【讨论】：