资讯专栏INFORMATION COLUMN

ie下带滚动条容器background属性和border属性的bug

Tonny / 3301人阅读

摘要:经测试现象消失。总结问题虽然解决了但还是花费了很多时间的问题出现的根本原因还是不清楚目前只能归结于浏览器的了因为我自己的下是好的只在测试机上的不行愿以后不再兼容

现象
封装的angularjs hikSelect指令在个别ie11浏览器下下拉选项在滚动是会出现横线.

分析
打开调试工具,发现去掉滚动容器的上下边框后该现象消失,因此认为是边框导致了该问题,但这个边框不能去掉,因此还要继续分析.自己写了一个带滚动条带边框的div在ie下没问题,因此不全是边框导致的该问题,后面把有问题的样式直接全部拿过来一个个排除,发现当设置background: #fff时问题出现了.

结论
经过测试当在一个带滚动条的div上同时设置background和上下边框的border属性,拖动滚动条时会出现横线.

解决方法
由于border和背景需要设置,因此决定添加一层div试试,将背景色、overflow和max-height属性移到新添加的子div容器上设置。经测试现象消失。

总结
问题虽然解决了,但还是花费了很多时间的,问题出现的根本原因还是不清楚,目前只能归结于ie浏览器的bug了,因为我自己的ie下是好的,只在测试机上的ie不行,愿以后不再兼容ie.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114157.html

相关文章

  • CSS题目及答案整理

    摘要:解决方案为加上使其形成,根据规则第六条,计算高度时就会计算的元素的高度,达到清除浮动影响的效果。并为这个外层元素设置,使其形成。生成相对定位的元素,相对于其正常位置进行定位。它的所有子元素自动成为容器成员,称为项目,简称项目。 原文链接在这里 CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型(相当于box-sizing: bor...

    lijy91 评论0 收藏0
  • 可视化效果(Visual effects)

    摘要:一般地,一个块盒的内容都被限制在该盒的边内。这种盒并不一定会根据其祖先的属性裁剪。默认情况下,元素不会被裁剪。在闭合路径内的内容会显示,而路径外边的都会被剪掉著作权归作者所有。 Overflow and clipping 一般地,一个块盒的内容都被限制在该盒的content边内。某些情况下,一个盒可能会溢出,意味着它的部分内容或者全部内容位于该盒外部,例如: 一行无法拆分,导致行盒比...

    JowayYoung 评论0 收藏0
  • 浏览器滚动样式还可以改变,你知道吗?

    摘要:有时候,我们是不是觉得浏览器默认的滚动条很,那么浏览器滚动条样式能否改变呢,答案是肯定的,今天就给大家分享一下怎么改变浏览器的默认滚动条,让我们的页面更加炫酷。 有时候,我们是不是觉得浏览器默认的滚动条很low, 那么浏览器滚动条样式能否改变呢,答案是肯定的,今天就给大家分享一下怎么改变浏览器的默认滚动条,让我们的页面更加炫酷。 在次之前,我们先来了解一下滚动条产生的原因,通俗的来讲就...

    fjcgreat 评论0 收藏0
  • 50道CSS基础面试题(附答案)

    摘要:弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用这一标记,将浏览器从所有情况中分离出来。偶数字号相对更容易和设计的其他部分构成比例关系。 1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本I...

    wua_wua2012 评论0 收藏0
  • 整理 45 道 CSS 基础面试题(附答案)

    1、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin 2、box-sizing属性? 用来控制元素的盒子模型的解析模式,默认为content-boxcontext-box:W3C...

    alanoddsoff 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<