选项卡内容未出现在方向上

Question

有2个选项卡都显示jQuery滑块 - flexslider（这是一个移动网站）。在纵向模式下有2个图像（所以2个div），在横向模式下有3个图像（所以3个div）。它们被保存在不同的容器代码中，这些代码由CSS控制，根据方向显示。问题是当设备选择方向时，第一个选项卡显示正常，但是当您切换到另一个选项卡时，内容不会出现，在普通桌面浏览器中测试它时，只要窗口稍微调整一下就会出现。简而言之，这是代码：

HTML:

    <!--tabs-->
    <div id="toggleLeft" class="active toggleBox"><a href="" >New Promotions</a></div>
    <div id="toggleRight" class="toggleBox"><a href="">Ending soon</a></div>

    <!--containers-->

    <div id="toggleBoxLeft">
      <div id="mainPortrait" role="main">SLIDER CODE FOR PORTRAIT VIEW</div>
      <div id="mainLandscape" role="main">SLIDER CODE FOR LANDSCAPE VIEW</div>
    </div>

    <div id="toggleBoxRight">
      <div id="mainPortrait2" role="main">SLIDER CODE FOR PORTRAIT VIEW</div>
      <div id="mainLandscape2" role="main">SLIDER CODE FOR LANDSCAPE VIEW</div>
    </div>

    CSS:

    @media all and (orientation:landscape){

    #mainPortrait           {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:hidden;
    }

    #mainLandscape          {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:visible;
    }

    #mainPortrait2          {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:hidden;
    }

    #mainLandscape2             {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:visible;
    }

    }

即使CSS在display:none;声明，我如何“强制”浏览器加载两个标签内容？