Bootstrap 3在Internet Explorer 11中的布局格式问题求助

嘿，这IE11的兼容性问题确实头疼！我帮你梳理下问题根源，再给你一套能解决的优化方案～

效果对比 #

• Chrome正常显示：
  
• IE11异常显示：
  

问题根源分析 #

1. 废弃属性使用：代码里用了align、valign这些HTML废弃属性，IE11对这类属性的解析和现代浏览器（比如Chrome）差异很大；
2. 重复ID问题：HTML中ID必须唯一，但你用了两个id="name"和两个id="contactImg"，IE对这种不规范的代码容错率更低；
3. 浮动与清除问题：文字区域没有正确清除浮动，导致在IE11里被图片覆盖错位；
4. Bootstrap 3在IE11的小兼容坑：栅格和表格布局的组合在IE11下容易出现对齐偏差。

修复方案（CSS调整+HTML优化） #

1. 优化后的CSS代码

.bottomRightBox {
  height: 170px;
  width: 310px;
}

#contactsPicture {
  /* 替换废弃的align/valign，用标准CSS实现 */
  float: left;
  vertical-align: top;
  height: 98px;
}

#contactImg1, #contactImg2 {
  width: auto;
  height: 148px;
  /* 给图片添加间距，避免挤在一起 */
  margin-right: 5px;
}

.contactsPictureName {
  color: black!important;
  font-weight: normal!important;
  padding-left: 15px!important;
  padding-top: 2px;
  /* 清除浮动，避免文字被图片覆盖 */
  overflow: hidden;
}

#rightBottomHeading {
  float: right;
  clear: right;
  padding-right: 176px;
  font-size: 18px!important;
  font-weight: bold!important;
}

/* IE11专属兼容补丁：针对IE11的特殊解析做修正 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .contactsPictureName {
    display: block;
    clear: left;
  }
  #contactsPicture {
    display: inline-block;
  }
}

2. 优化后的HTML代码

<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>
          <td id="contactsPicture">
            <div class="UserPhoto">
              <a href="IMAGE LINK" target="_blank">
                <img id="contactImg1" src="IMAGE URL" alt="A" />
              </a>
              <a href="mailto:Portalhelp">
                <img id="contactImg2" 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="_blank" style="color: black;">
                <p class="name" style="width: auto; float: left; clear: none;">NAME</p>
              </a>
              <a href="URL" style="color: black;">
                <p class="name" style="width: auto; float: right; clear: none; margin-right: 45px;">PORTALHELP</p>
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

关键修改说明 #

• 替换了align、valign等废弃属性，改用标准CSS实现对齐；
• 修正了重复ID的问题（将重复的contactImg、name改为唯一ID或Class）；
• 给图片添加了margin-right优化间距，移除冗余的内边距样式；
• 为.contactsPictureName添加overflow: hidden清除浮动，解决文字错位；
• 增加IE11专属媒体查询，针对IE11的解析特性做适配；
• 修正了target="_black"的拼写错误，改为标准的target="_blank"。

这样调整后，你的布局在Chrome和IE11里就能保持一致的显示效果啦！

内容的提问来源于stack exchange，提问作者user9727963