这个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浏览器版本作者没有测过，有兴趣的可以尝试一下，如果有其他高见，请评论联系我。
