2017-09-13 115 views
1

所以我今天才知道我們的網站在IE11中沒有正確渲染。在其他地方工作就好了。問題是設置爲display: table-cell的第二部分沒有顯示出來。我發現了一個bug報告,這似乎是在這裏相同的問題:https://connect.microsoft.com/IE/feedbackdetail/view/1263383/ie11-shows-every-html-input-element-with-display-table-cell-css-style-at-a-new-linedisplay:table-cell only not in IE11 only

我試過建議的解決方法無濟於事。 我的網站是現場直播,所以沒有必要的小提琴。我的直播網站:http://clubschoicefundraising.com/這裏是我爲創建的小提琴,當我在網站上修復這個問題時:https://jsfiddle.net/bo3khLjy/在Chrome,Firefox和IE Edge中,一切都很正常。但是,IE11顯然已經消失了右側的招牌。關於如何解決這個問題的任何想法?

相關SO張貼在這裏:IE11 shows every { display: table-cell } element at a new line

下面是相關HTML:

<section class="main-content"> 
    <div class="tableRow"> 
    <section class="cell leftSide"> 
     <div id="drop-message">@Html.Raw(ViewBag.Message)</div> 
     @{ Html.RenderPartial("~/Views/Shared/_TopPartial.cshtml"); } 
     @RenderBody() 
    </section> 
    <section class="cell rightSide"> 
     @{ Html.RenderPartial("~/Views/Shared/_RightSidePartial.cshtml"); } 
    </section> 
    </div> 
</section> 

和CSS:

.tableRow { 
    display: table-row; 
} 
.main-content { 
    display: table; 
    width: 100%; 
} 
.main-content .cell { 
    display: table-cell; 
    vertical-align: top; 
} 

下面是相關的代碼瀏覽器看到:

<section class="main-content"> 
       <div class="tableRow"> 

        <div class="cell leftSide"> 
         <div id="drop-message"></div> 
<div id="topPart"> 
    <!-- show this stuff at the top only on mobile --> 
    <div class="row mobClubhouseInfo"> 
     <div class="col-xs-24 col-md-8 col-md-push-16"> 

      <a href="http://seller.clubschoicefundraising.com/Account/Register"><img width="250" class="img-responsive text-center center-block" alt="Clubhouse" src="/Content/img/ClubhouseLogo-NEW.png"></a> 
     </div> 
     <div class="col-xs-24 col-md-16 col-md-pull-8"> 
      <h1>WHAT CAN <span class="orange">YOU</span> DO?</h1> 
      <p> 
       Join the Clubhouse (Seller Registration) – Each seller enters information about 
       themselves and the fundraiser they are doing. Sellers must be 
       registered in order to participate in special promotional contests. 
       Once the seller is registered, they can participate in sending emails 
       and/or text messages to family and friends regarding their 
       fundraiser. Registration is easy! Click on 「Join the Clubhouse」. 
       Complete the required info* and you are registered! 
       If you are already registered, click on 「Go To My Clubhouse」. 
       </p> 
       <p class="fpNote">*(Don’t worry Mom and Dad, we don’t share this information with anyone. The information is used for customer service purposes only.)</p> 
      <p></p> 
     </div> 
    </div> 

    <div class="signpost"> 
     <img src="/Content/img/sign-post.png"> 
     <a class="board board1" href="http://seller.clubschoicefundraising.com/Account/Register"> 
      <p>Join the Clubhouse</p> 
      <div class="note">(Students Register Here)</div> 
      <img src="/Content/img/board1.png"> 
     </a> 
     <a class="board board2" href="http://seller.clubschoicefundraising.com/Home/Main"> 
      <p>Go to my Clubhouse</p> 
      <img src="/Content/img/board2.png"> 
     </a> 
     <a class="board board3" href="http://cris.clubs-choice.com/clbstatic/clblogin.htm"> 
      <p>Chairperson Login</p> 
      <img src="/Content/img/board3.png"> 
     </a> 
     <a class="board board4" href="/programs/referral-program"> 
      <p>Referral Program</p> 
      <img src="/Content/img/board4.png"> 
     </a> 
     <a class="board board5" href="https://shop.clubschoicefundraising.com"> 
      <p>Order Online Now</p> 
      <img src="/Content/img/board5.png"> 
     </a> 
    </div> 
    <div class="startFund"> 
     <a href="/contact/contact-us"> 
      Do you want to start a fundraiser?<br> 
      <img alt="Click Here" src="/Content/img/clickHere.png"> 
     </a> 
    </div> 

</div> 



<section class="mainWrap"> 
    <div class="paddingWrap"> 
     <div class="clubhouseInfo"> 
      <div class="row"> 
       <div class="col-xs-24 col-md-8 col-md-push-16"> 

        <a href="http://seller.clubschoicefundraising.com/Account/Register"><img width="250" class="img-responsive center-block" alt="Clubhouse" src="/Content/img/ClubhouseLogo-NEW.png"></a> 
        <br> 
        <h2 class="text-center"><a class="text-center" href="/programs/contest-rules">Grand Prize Giveaway Official Contest Rules</a></h2> 
       </div> 
       <div class="col-xs-24 col-md-16 col-md-pull-8"> 
        <h1 class="whatdo">WHAT CAN <span class="orange">YOU</span> DO?</h1> 
        <p> 
         Join the Clubhouse (Seller Registration) – Each seller enters information about 
         themselves and the fundraiser they are doing. Sellers must be 
         registered in order to participate in special promotional contests. 
         Once the seller is registered, they can participate in sending emails 
         and/or text messages to family and friends regarding their 
         fundraiser. Registration is easy! Click on <a class="join" href="http://seller.clubschoicefundraising.com/Account/Register">「Join the Clubhouse」</a>. 
         Complete the required info* and you are registered! 
         if you are already registered, click on <a class="gotoclubhouse" href="http://seller.clubschoicefundraising.com/Home/Main">「Go to my Clubhouse」</a>. 
        </p> 
        <p class="fpNote">*(Don’t worry Mom and Dad, we don’t share this information with anyone. The information is used for customer service purposes only.)</p> 
       </div> 
      </div> 
     </div> 


     <br> 
     <div class="row"> 
      <h2 class="ital col-sm-24">Let our Experience speak for itself:</h2> 
      <div class="col-sm-8"> 
       <img class="img-responsive" alt="Pizza" src="/Content/img/Pizza.jpg"> 
       <h2 class="fixed">Highest Quality Fundraising Programs in the Industry!</h2> 
       <p> 
        Club's Choice stands behind its products and offers top-notch customer service to 
        our customers. 
       </p> 
       <a class="read-more" href="/step-by-step/meeting-the-products">Read More...</a> 
       <div class="clearfix"></div> 
      </div> 
      <div class="col-sm-8"> 
       <img class="img-responsive" alt="Eating Pizza" src="/Content/img/EatingPizza.jpg"> 
       <h2 class="fixed">Outstanding Guaranteed Services</h2> 
       <p> 
        From day one until the day we deliver and beyond! All our products are 100% guaranteed! 
        If you're not satisfied, we can refund or replace your products. 
       </p> 
       <a class="read-more" href="/step-by-step/step-by-step">Read More...</a> 
       <div class="clearfix"></div> 
      </div> 
      <div class="col-sm-8"> 
       <img class="img-responsive" alt="Online Reports" src="/Content/img/phone-tablet.jpg"> 
       <h2 class="fixed">All reports available on-line 24-7</h2> 
       <p> 
        On-line ordering, detailed customizable reporting and student generated e-mails, automatic FaceBook posts, texts. extremely easy to 
        use and customer friendly online shopping experience and more. 
       </p> 
       <br> 
      </div> 
     </div> 
     <img class="premier-logo" alt="Premier Choice" src="/Content/img/2014-Premier-Logo.jpg"> 
     <p> 
      When you see the Premier Choice logo next to any product in our brochure, you can 
      rest assured that it was manufactured by our family-owned business to the highest 
      standards. The Premier Choice logo means we proudly serve it to our guests in our 
      own home. 「Your guests are our guests!" 
     </p> 
     <div class="clearfix"></div> 
     <br> 
     <div class="row"> 
      <img class="col-md-8 img-responsive center-block" alt="Save-Around" src="/Content/img/SaveAround.png"> 
      <a class="col-md-8" href="http://clubschoiceholidayshoppe.com/"> 
       <img class="img-responsive center-block" alt="Holiday Shoppe" src="/Content/img/HolidayShoppe.png"> 
      </a> 
      <a class="col-md-8" href="http://flash.clubschoicefundraising.com/TodaysFavorites-2017/"> 
       <img class="img-responsive center-block annes" alt="Auntie Annes" src="/Content/img/Auntie-Annes.jpg"> 
      </a> 
     </div> 
     <br><br> 
     <div class="row"> 
      <a class="col-md-8" href="http://flash.clubschoicefundraising.com/RiverCity-2017/"> 
       <img class="img-responsive center-block" alt="Innisbrook" src="/Content/img/innisbrook.png"> 
      </a> 
      <a class="col-md-8" href="http://flash.clubschoicefundraising.com/CookieDoughAndMore-2017"> 
       <img class="img-responsive center-block" alt="Otis Spunkmeyer" src="/Content/img/Otis_fund_logo.png"> 
      </a> 
      <a class="col-md-8" href="/programs/candy-bars"> 
       <img class="img-responsive center-block" src="/Content/img/Hebert-Logo.png"> 
      </a> 
     </div> 
    </div> 
    <div class="clear-fix"> 
    </div> 
</section> 

        </div> 

        <div class="cell rightSide"> 
<div id="rightbar"> 

    <div class="signpost"> 
     <img src="/Content/img/sign-post.png"> 
     <a class="board board1" href="http://seller.clubschoicefundraising.com/Account/Register"> 
      <p>Join the Clubhouse</p> 
      <div class="note">(Students Register Here)</div> 
      <img src="/Content/img/board1.png"> 
     </a> 
     <a class="board board2" href="http://seller.clubschoicefundraising.com/Home/Main"> 
      <p>Go to my Clubhouse</p> 
      <img src="/Content/img/board2.png"> 
     </a> 
     <a class="board board3" href="http://cris.clubs-choice.com/clbstatic/clblogin.htm"> 
      <p>Chairperson Login</p> 
      <img src="/Content/img/board3.png"> 
     </a> 
     <a class="board board4" href="/programs/referral-program"> 
      <p>Referral Program</p> 
      <img src="/Content/img/board4.png"> 
     </a> 
     <a class="board board5" href="https://shop.clubschoicefundraising.com"> 
      <p>Order Online Now</p> 
      <img src="/Content/img/board5.png"> 
     </a> 
    </div> 
    <div class="startFund"> 
     <a href="/contact/contact-us"> 
      Do you want to start a fundraiser?<br> 
      <img class="img-responsive center-block" alt="Click Here" src="/Content/img/clickHere.png"> 
     </a> 
    </div> 
    <div> 
     <h2>Easy Fundraising</h2> 
     <ul> 
      <li>No Money Up Front.</li> 
      <li>Pre-packed product by seller.</li> 
      <li>Customized reports.</li> 
      <li>Customized letters and thank-you notes.</li> 
      <li>Online ordering.</li> 
      <li>Email selling tool.</li> 
     </ul> 
     <h2>Most Profitable</h2> 
     <ul> 
      <li>Ordering.</li> 
      <li>Free Pre-Pack per Seller.</li> 
      <li>Free Prize Program.</li> 
      <li>Free Brochures.</li> 
      <li>School Grants Available.</li> 
      <li>Invoice At Delivery.</li> 
     </ul> 
     <h2>Links</h2> 
     <ul> 
      <li> 
       <a href="http://pdf.clubschoicefundraising.com/order-form.pdf" target="_blank"> 
        Download Order Form<br> 
        <img alt="Order Form" src="/Content/img/order-form-small.jpg"> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 
        </div> 

       </div> 
      </section> 
     </div> 
     <footer> 
<div class="row"> 
    <div class="col-sm-9"> 
     Toll Free 1-800-346-5599<br> 
     <span class="yellow">You can now text us! 715-256-7662 (only between 9am and 4pm CST)</span><br> 
     3421 Truax Court<br> 
     P.O. Box 307<br> 
     Eau Claire, WI 54703 
    </div> 

    <div class="col-sm-6"> 
     <!-- site seal is slowing site down, removing for now --> 

    </div> 
    <div class="col-sm-9"> 
     © 2017<br> 
     Club's Choice Fundraising.<br> 
     All rights reserved.<br> 
     <a href="http://clubschoicefundraising.com/home/privacy">Privacy Policy</a>.<br> 
    </div> 
</div> 
     </footer> 
+0

請包括編譯標記的瀏覽器看到。 – TylerH

+2

請勿將鏈接發佈到您的頁面。如果你修復了這個錯誤,那麼這個問題對於未來的訪問者將是沒有價值的。將問題的工作片段納入您的問題。 –

+0

好點@MatthiasS。我現在在我的問題中添加了一個小提琴。 – dmikester1

回答

1

我可以在這裏解決問題。 IE 11渲染圖像的實際寬度,如「Hebert-Logo.png」 - 寬度爲1800px。這是這裏的問題。我只是增加了下面的CSS和它的工作對我來說:

.img-responsive {width: 100%;} 

工作版本:https://jsfiddle.net//vybgc7rv/

+0

爲我修好了!謝謝你跟蹤! – dmikester1

0

在您找到的錯誤報告中以及相關問題中,有一種解決方法。

根據您的情況,在輸入之間添加一個空的<div style="width:0;display:table-cell">元素可能是可以接受的解決方法。

堆棧溢出後也給了codepen一個例子:http://codepen.io/vinaymavi/pen/JWjxJb

看看是否有幫助

+0

我記得看到這一點,嘗試它,永遠不會得到它的工作。 – dmikester1