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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,701评论 1 13
  • 昨天是周五,下午替一把手去开了会,会后回到办公室匆匆安排了工作,收拾东西准备回家。才上班的女大学生搭车...
    雪木912阅读 208评论 0 0
  • 前言 此处转载一篇大神写的很好的操作流程进行Mark导读:如何使用TestFlight进行App构建版本测试 准备...
    KODIE阅读 8,726评论 0 6
  • 他就是 一只次新股 疯狂生长十天半月 就走过盛年 余生跌跌不休 偶尔闪亮 只为闷杀又一个美人 回望曾经走过的路 没...
    第一闲人阅读 157评论 0 0