Bootstrap 和 Internet Explorer 11 问题

Question

So I'm having a small formatting problem with my Internet Explorer 11.

Here is the picture from Google Chrome (THIS IS PERFECT):

Here is the picture from Internet Explorer 11

Here is the code:

 .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>

Any input with CSS formatting and styling would be highly appreciated. Currently using Bootstrap 3.

Answer 1

Got it guys!

Thanks to Girdharilal and his attempt I was able to use:

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

which ended up working perfectly.

Answer 2

I would suggest a different approach to your display method. Rather than relying on a bunch of custom css and float declarations, why not use the Grid for this situation? Consider the following implementation:

 .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>

In the above code we're relying more heavily on the Bootstrap 3.x Grid component as well as a few other utility classes. An added bonus is that by relying more heavily on Bootstrap you have an opportunity to offer better responsive behavior.

It really only requires one custom line of CSS; .contactBox ... which is really only there to ensure that you have proper bottom padding without the need to re-iterate row or add line breaks.

You may need to expand the snippet to see how the layout can adjust depending on screen resolution. Alternatively, you can view the same code via the following Bootply link: https://www.bootply.com/LK0cVLrCBm