Bootstrap 和 Internet Explorer 11 問題

Question

所以我的 Internet Explorer 11 有一個小的格式問題。

這是谷歌瀏覽器的圖片（這是完美的）：

這是 Internet Explorer 11 中的圖片

這是代碼：

 .bottomRightBox { height: 170px; width: 310px; /* background-color: #4B92DB; border: 1px black solid; //BOTTOM RIGHT BOX BORDER */ } #contactsPicture { align: left; valign: top; height: 98px; /* padding-top: 10px; //PADDING FOR CONTACT PICTURE */ } #contactImg { width: auto; height: 148px; } .contactsPictureName { color: black!important; font-weight: normal!important; padding-left: 15px!important; padding-top: 2px; } #rightBottomHeading { float: right; clear: right; padding-right:176px; font-size: 18px!important; font-weight: bold!important; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="col-sm-offset-0 col-sm-12 col-md-4" style="padding-right: 0px;"> <h4 id="rightBottomHeading">Office 365 Contacts</h4> <hr id="bottomRightLineBreaker"/> <div class="bottomRightBox"> <table> <tbody> <tr valign="top" id="ctl00_m_g_63062bfa_96b4_4d90_b7c4_92ac5983dbfe_ctl00_uxGenericListView_ctrl0_ctl09_genericPicRow"> <td id="contactsPicture"> <div class="UserPhoto"> <a href="IMAGE LINK" target="_blank" style="padding-right: 5px;"><img id="contactImg" src="IMAGE URL" alt="A" /></a> <a href="mailto:Portalhelp" style="padding-left: 5px;"><img id="contactImg" src="IMAGE URL" alt="P" /></a> </div> </td></tr> <tr valign="top"> <td style="width: 106px" valign="top"> <div class="contactsPictureName"> <a href="PICTURE LINK" target="_black" style="color: black;"><p id="name" style="width: auto; float: left; clear: none;">NAME</p></a> <a href="URL" style="color: black;"><p id="name" style="width: auto; float: right; clear: none; margin-right: 45px;">PORTALHELP</p></a> </div> </td></tr> </tbody> </table> </div> </div>

任何帶有 CSS 格式和樣式的輸入都將受到高度贊賞。 目前使用 Bootstrap 3。

Answer 1

明白了伙計們！

感謝 Girdharilal 和他的嘗試，我能夠使用：

 .UserPhoto a { display: -ms-inline-flexbox; }

最終完美運行。

Answer 2

我建議對您的顯示方法采用不同的方法。 與其依賴一堆自定義的 css 和float聲明，為什么不在這種情況下使用 Grid 呢？ 考慮以下實現：

 .contactBox { padding-bottom: 1.5rem; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container-fluid"> <div class="row"> <!-- The Left Column (Implied but never specified) --> <div class="col-sm-12 col-md-8"> <p>This area is intentionally left blank.</p> </div> <!-- Your Right Column --> <div class="col-sm-12 col-md-4"> <h4>Office 365 Contacts</h4> <div class="row"> <div class="contactBox col-xs-6 col-md-4 text-center"> <a href="#userPhotoLink"><img src="https://placehold.it/250x150" class="img-responsive" /></a> <a href="#userEmailLink">Name</a> </div> <div class="contactBox col-xs-6 col-md-4 text-center"> <a href="#userPhotoLink"><img src="https://placehold.it/250x150" class="img-responsive" /></a> <a href="#userEmailLink">Name</a> </div> <div class="contactBox col-xs-6 col-md-4 text-center"> <a href="#userPhotoLink"><img src="https://placehold.it/250x150" class="img-responsive" /></a> <a href="#userEmailLink">Name</a> </div> <div class="contactBox col-xs-6 col-md-4 text-center"> <a href="#userPhotoLink"><img src="https://placehold.it/250x150" class="img-responsive" /></a> <a href="#userEmailLink">Name</a> </div> </div> </div> </div> </div>

在上面的代碼中，我們更多地依賴 Bootstrap 3.x Grid組件以及一些其他實用程序類。 一個額外的好處是，通過更多地依賴 Bootstrap，你有機會提供更好的響應行為。

它實際上只需要一行自定義的 CSS； .contactBox ... 這實際上只是為了確保您有適當的底部填充，而無需重復row或添加換行符。

您可能需要展開代碼段以查看布局如何根據屏幕分辨率進行調整。 或者，您可以通過以下 Bootply 鏈接查看相同的代碼： https ://www.bootply.com/LK0cVLrCBm