删除 div 中的列表元素时,框阴影在 div 上消失



要测试或查看错误:

(注意:自从问题首次发布以来,错误已在第二次更新的链接上复制)

  • 转到 sukritchhabra.com/importr
  • 在搜索栏中键入引导程序。
  • 建议列表中选择引导程序(注意:如果您不从列表中选择,而是在搜索框中按 Enter 键,页面将中断,您必须刷新)
  • 加载引导程序后,按绿色按钮 6-7 次(直到出现滚动条)
  • 现在删除其中的一些,框阴影将消失。

到目前为止,我已经尝试了几件事。尝试在每次删除后记录 .importrLinks 的 box-shadow 属性,以捕获它正在更改的位置,但实际上没有发生任何更改。

还尝试在每次删除后显式分配框阴影,这也无济于事。

在寻找解决方案的过程中,很多类似的错误都是因为 z-index,但我尝试分配自定义 z-index,但这并没有帮助(尽管我仍然认为这是我没有完全测试的东西,因为我分配随机,即,改变越来越低,z-index 只是为了检测变化)。

更新

正如评论中所建议的,我应该提供示例代码而不是完整的网站,我同意。但是,正如我在评论中提到的,我无法在小提琴上复制该错误。

尽管如此,这里有一个指向jsfiddle的链接:https://jsfiddle.net/sukritchhabra/d3xfyc6t/5/

该错误仍然没有发生在小提琴中,但仍然存在于网站上。我用来创建小提琴的代码是从网站上挑选的。我没有获取 addLink 函数的参数,而是传递了常量字符串进行测试。

第二次更新(错误已复制)

弄清楚错误正在发生,因为容器有一个float: left;.在小提琴上更改了它,现在错误已复制到此小提琴上。

小提琴链接:https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/

第三次更新(操作系统问题?

到目前为止,我一直在Mac上工作。我刚刚在Windows机器上测试了它,该错误似乎仅在Mac上。 我不能100%确定这是否是根本原因,但我肯定会在其他机器上测试它以确保。

同时,如果有人可以在Mac而不是Windows上看到该错误,请在此处告诉我。

确认了

OS X 上 Chrome 中的错误。我检查了一下,其他CSS属性似乎也会发生同样的情况,而不仅仅是box-shadow.例如,如果设置,则border会以相同的方式受到影响,并在您删除项目时消失。我认为这与将容器上的 CSS 属性组合overflow设置为 auto 有关。例如,我注意到,如果您删除float: leftbox-shadow停止消失。所以对我来说,这似乎是一个浏览器渲染问题,我不确定为什么它只发生在OS X上。

无论如何,如果您需要保持CSS完全原样,这里有一个远非优雅的解决方案,但它有效:

https://jsfiddle.net/d3xfyc6t/8/

它涉及每次删除元素时在容器上重新绘制浏览器:

$('.importrLinks').hide().show(0);

此技术取自此处:

https://stackoverflow.com/a/8840703

奇怪的是,如果您删除容器 DIV 上的浮点数,它会解决问题:https://jsfiddle.net/d3xfyc6t/10/

您还应该为其他浏览器添加盒影供应商前缀:

box-shadow: 0 0 10px 1px #e2e2e2;
-moz-box-shadow: 0 0 10px 1px #e2e2e2;
-webkit-box-shadow: 0 0 10px 1px #e2e2e2;

编辑:通过将float: left替换为position: absolute; left:0;来模仿左浮动,这样可以解决问题。您可能还需要设置包含您发布到的代码的任何外部容器position: relative; https://jsfiddle.net/d3xfyc6t/11/

最新更新