代码之家 › 专栏 › 技术社区 › user9727963

引导和Internet Explorer 11问题

twitter-bootstrap-3 css twitter-bootstrap html

user9727963 · 技术社区 · 6 年前

因此,我的Internet Explorer 11有一个小的格式问题。

这是谷歌Chrome上的图片(非常完美):

enter image description here

这是Internet Explorer 11中的图片

enter image description here

代码如下:

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

2 回复 | 直到 4 年前

user9727963 user9727963 6 年前

明白了伙计们!

多亏了Girdharial和他的努力,我才能够使用:

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

最终效果很好。

Robert 6 年前

我建议您采用不同的显示方法。而不是依赖于一堆自定义css和 float 声明,为什么不在这种情况下使用网格?考虑以下实施:

.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。十、 Grid 组件以及其他一些实用程序类。另外一个好处是,通过更加依赖引导,您有机会提供更好的响应行为。

它实际上只需要一行定制的CSS; .contactBox 。。。这实际上只是为了确保有适当的底部填充,而无需重新迭代 row 或添加换行符。

您可能需要展开代码段,以查看布局如何根据屏幕分辨率进行调整。或者,您可以通过以下Bootply链接查看相同的代码: https://www.bootply.com/LK0cVLrCBm