当在div内删除列表元素时，Box Shadow消失了。

Question

测试或查看错误：

（注意：自问题发布以来，错误已在第二次更新的链接中复制）

• 进入sukritchhabra.com/importr
• 在搜索栏中输入Bootstrap。
• 从建议列表中选择bootstrap（注：如果没有从列表中选择而是在搜索框中按enter，则页面会崩溃，您将不得不刷新）
• 一旦Bootstrap加载完毕，请按绿色按钮6-7次（直到出现滚动条）
• 现在删除其中几个，然后阴影框将消失。

我到目前为止尝试了几件事情。尝试记录每次删除后.importrLinks的box-shadow属性，以捕获它何时更改，但实际上没有任何更改。

还尝试了每次删除后明确分配box-shadow，但也没有帮助。

在寻找解决方法时，许多类似的错误都因为z-index而发生，但是我尝试分配自定义z-index并且那并没有帮助（虽然我仍然相信这是我没有完全测试的东西，因为我分配了随机的z-index以检测变化）。

更新

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

尽管如此，这里是jsfiddle链接：https://jsfiddle.net/sukritchhabra/d3xfyc6t/5/

错误仍然没有在fiddle中出现，但在网站中仍然存在。我用于创建fiddle的代码来自网站。我没有为addLink函数获取参数，而是传递了常量字符串进行测试。

第二次更新（已复制错误）

发现错误是因为容器使用了float: left;。已在fiddle上进行更改，现在该错误在此fiddle上得以复制。

fiddle链接：https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/

第三次更新（操作系统问题？）

到目前为止我一直在用Mac工作。我刚刚在Windows机器上进行了测试，似乎这个错误只存在于Mac上。我不能100%确定这是根本原因，但我会在其他机器上进行测试以确保。

同时，如果有人能在Mac上看到这个错误而在Windows上看不到，请在这里告诉我。

- Sukrit

---

请注意，自从我上次评论以来，我已经能够复制这个错误，并且它也反映在了 fiddle 中。 - Sukrit

小提琴完美地显示了盒子阴影，即使按照您所说的步骤。我使用的是Firefox 44.0.2版本。 - Marcos Pérez Gude

无法在最新的fiddle中再现。无论是在Firefox还是Chrome中都不行。 - Marcos Pérez Gude

Marcos，这个链接对我来说肯定是复制的：https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/ 这是第二次更新的链接。 - Sukrit

对于第二个更新的链接（jsfiddle），我在 Mac 上看到了错误，但在我的 PC 上没有。虽然我不认为这是操作系统的问题...这很奇怪。 - Vishrut Reddi

Answer 1

在您的Fiddle上，我确认了Chrome在OS X上的bug。 我检查过，其他CSS属性也会出现相同的问题，不仅是box-shadow。 例如，如果设置了border，当您删除元素时，它也会受到影响并消失。 我认为这与overflow设置为auto的容器上的CSS属性组合有关。因此，例如，我注意到，如果您删除float：left，box-shadow停止消失。所以对我来说，这似乎是一个浏览器渲染问题，我不知道为什么只发生在OS X上。

无论如何，如果您需要保持CSS不变，这里有一个远非优雅但可行的解决方法：

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

每次删除一个元素时，它都涉及到在容器上进行浏览器重绘:

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

这个技巧来自于这里： https://dev59.com/k2ox5IYBdhLWcg3w_ZR0#8840703

- ilokhov

---

这绝对是一个有效的解决方法。但正如你所说，我也同意，这并不是一个优雅的解决方案。尽管如此，即使这似乎是一个hack，这可能是目前解决该漏洞的最佳方法。自上次我更新以来，该漏洞已经在网站上消失了，但仍然存在于fiddle中。 - Sukrit

Answer 2

奇怪的是，如果您在容器DIV上删除float，它会解决问题：https://jsfiddle.net/d3xfyc6t/10/

您还应该为其他浏览器添加box-shadow供应商前缀：

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/

- annieXo

---

我明白移除浮动可以解决问题。这正是帮助我首次发现错误的原因。但是，fiddle上的代码是一个更大系统的一部分，float属性仍然非常重要。 除非通过移除浮动并使用其他属性来模拟它来修复问题。 - Sukrit

尝试将 float:left; 替换为：position:absolute; left: 0;。如果您发布的代码未嵌套在页面上的其他容器元素中，则这将很有效。如果它在某些容器内部，请设置外部容器为 position:relative; 以模仿左浮动。 - annieXo

^ 是的，那应该解决了：https://jsfiddle.net/d3xfyc6t/11/。我更新了我的原始答案。 - annieXo

就像我之前所说的，它是一个更大系统的一部分，该问题的前几行提供了该网站的链接。我在那里测试过它，你的建议可能修复了错误，但它根本不模拟“float”。请随意在该网站上进行测试。 - Sukrit

抱歉，我没有看到整个网站的链接。现在我已经在那里测试过了，这个替换浮动而不破坏布局：position: absolute; right: 5%;但像你一样，我现在在实际网站上也看不到错误。奇怪！ - annieXo