Bootstrap模态框在IE11缩放150%下出现横竖线

这个bug困扰了我好久，开始一直排查不到是什么情况，因为现象很怪，在特定情况下出现：
Bootstrap版本：3.3.7
浏览器： IE11.125.16299.0
缩放比： 150%
区域： 模态框

现象

• 出现横竖线，效果如下：

  
  
  模态框中含有不正常的线.png

• 正常的模态框如下：

  
  
  正常模态框.png

• 鼠标移上去出现更多的横竖线，且只在缩放比150%下出现，149%和151%都不会出现

• 在Bootstrap官网的模态框示例也出现相同的情况：
  

  官网模态框实例.png

解决方法

• 修改Bootstrap的css去除background-clip或把padding-box改为border-box

// modals.less
// Actual modal
.modal-content {
  position: relative;
  background-color: @modal-content-bg;
  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
  border: 1px solid @modal-content-border-color;
  border-radius: @border-radius-large;
  .box-shadow(0 3px 9px rgba(0,0,0,.5));
  // background-clip: padding-box;    
  // Remove focus outline from opened modal
  outline: 0;
}

background-clip属性

• background-clip是css3新增属性，规定背景的绘制区域的作用
• Internet Explorer 8 以及更早的版本不支持 background-clip 属性
• 有以下三种赋值：

值	描述
border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框
content-box	背景被裁剪到内容框

• 具体示例可参照w3school(测试chrome无效)

• 网上也有许多讲更深层次background-clip属性介绍的文章，大家可自行搜索

作者也没有深入去了解Bootstrap加此属性的用意，其他Bootstrap版本、IE浏览器版本作者没有测过，有兴趣的可以尝试一下，如果有其他高见，请评论联系我。