使用flexbox和Firefox的Firefox问题

Question

我正在将模板转换为弹性框，我遇到了一些问题。 IE和Chrome中的一切都运行良好，但在Firefox中却很有用。我在Firefox中有2个问题。 ＃1是项目不排成1行。我得到左侧的徽标，然后是下面的主标题区域（有2行），下面是下一张图片。 ＃2是文本溢出：省略号根本不起作用。有人可以帮帮我吗？

如果有人想知道为什么我在屏幕缩小时有不同的方法，那部分是为了容纳iPhone4和三星3手机。我可能错了，但我认为还有足够的理由让我继续考虑它们。

另一方面，我在寻找旧版flex-box选择器的前缀时遇到了很多问题。我知道我们应该提前考虑，但是由于旧的浏览器，并不是每个人都在船上。有什么建议吗？

Site with pictures and javascript

＆＃13;

＆＃13;

         var oneliner = $('#head_News').newsTicker
         (
            {
               row_height: 45,
               max_rows: 1,
               time: 5000,
               nextButton: $('#head_Info .header')
            }
         );
      
         // Pause newsTicker on .header hover
         $('#oneliner .header').hover
         (function()
            {
               oneliner.newsTicker('pause');
            },
            function()
            {
               oneliner.newsTicker('unpause');
            }
         );

＆＃13;

html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,
table,tr,td,th,p,img
{
   margin: 0;
   padding: 0;
}

body
{
   color: #CF6;
   margin: 0 auto;
   font-size: 1.0em;
   max-width: 1280px;
   overflow-y: scroll;
   text-transform: uppercase;
   font-family: "Tahoma", Verdana, sans-serif;
   background: #777 url(../homepics/homeback.jpg) top center;
}

#head_Main
{
   height: 112px;
   margin-bottom: -112px;
   border: 2px solid #444;
   background: #555 url(../homepics/homemenu2.png) 0 0 repeat-x;
}

#head_Wrap
{
   width: 94%;
   margin: 0 auto;
   max-width: 84em;

   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

   -webkit-flex-flow: row wrap;
   -moz-flex-flow: row wrap;
   -ms-flex-flow: row wrap;
   flex-flow: row wrap;
}

#head_Logo
{
   top: 0;
   left: 0;
   width: 77px;
   height: 90px;
   height: 112px;
   background: url(../homepics/homelogo.png) 0 0 no-repeat;
}

#head_Area
{
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   -ms-flex: 2;
   -webkit-flex: 2;
   flex: 2;

   -webkit-flex-flow: column nowrap;
   -moz-flex-flow: column nowrap;
   -webkit-flex-flow: column nowrap;
   flex-flow: column nowrap;
}


#head_Info
{
   color: #0FF;
   height: 45px;
   line-height: 45px;
}

#head_News
{
   padding: 0 5px;
   font: bold 125%/45px Arial, Helvetica, sans-serif;
}

#head_News li
{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.head_Menu
{

}

#head_Note
{
   top: 0;
   width: 77px;
   height: 112px;
   background: url(../homepics/homelogo.png) 0 0 no-repeat;
}

@media (max-width: 40em)
{

   #head_Wrap
   {
      width: 100%;
   }

   #head_Area
   {
      display: block;

      display: box;
      display: -moz-box;

      -webkit-column-count: 1;
      -webkit-column-gap: 10px;

      -moz-column-count: 1;
      -moz-column-gap: 10px;
   }

   #head_News li
   {
      color: red;
      height: 45px;
      padding: 15px 0;
      line-height: 45px;
      font: bold 16px Arial, Helvetica, sans-serif;
   }

}

＆＃13;

      <header id="head_Main">
         <section id="head_Wrap">

            <article id="head_Logo">
            </article>

            <article id="head_Area">

               <div id="head_Info">
                  <ul id="head_News">

                     <li>This is top secret.<a href="#">Read more...</a></li>
                     <li>This would be the xxxxxxxxxxxxSECOND line of info and lots more where this came from in this test.</li>
                     <li>&nbsp;</li>
                     <li>This would be the FORTH line.</li>

                  </ul><!-- end of #head_News -->
               </div>

               <div id="peter-bottom">MENU</div>
            </article>

            <article id="head_Note">
               <!--  HERE  -->
            </article>

         </section>
      </header>

      <section>
         <article>
            <header>
               <!--  HERE  -->
            </header>
         </article>
         <article>
            <header>
               <!--  HERE  -->
            </header>
         </article>
      </section>

      <footer>footer</footer>

＆＃13;

＆＃13;

＆＃13;