html - 显示 :table-cell not working in IE11 only

Question

所以我今天才知道我们的网站在 IE11 中无法正确呈现。在其他任何地方都可以正常工作。问题是设置为 display: table-cell 的第二部分未显示。我在这里发现了一个错误报告，它似乎是同一个问题:https://connect.microsoft.com/IE/feedbackdetail/view/1263383/ie11-shows-every-html-input-element-with-display-table-cell-css-style-at-a-new-line

我尝试了建议的解决方法，但无济于事。 我的网站是实时的，所以不需要 fiddle 。 我的实时网站:http://clubschoicefundraising.com/这是我在现场修复此问题时创建的 fiddle :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>

Answer 1

我可以在这里解决问题。 IE 11 呈现图像的实际宽度，例如“Hebert-Logo.png”——宽度为 1800 像素。这就是这里的问题。我刚刚添加了以下 css，它对我有用:

.img-responsive {width: 100%;}

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