11

要测试或查看错误：

（注意：错误已在 Second Update 中的链接上复制，因为问题是第一次发布的）

  • 访问 sukritchhabra.com/importr
  • 在搜索栏中输入 Bootstrap。
  • 从建议的列表中选择引导程序（注意：如果您没有从列表中选择，而是在搜索框中按回车，页面将中断，您必须刷新）
  • Bootstrap 加载后，按绿色按钮 6-7 次（直到出现滚动条）
  • 现在删除其中的一些，box-shadow 就会消失。

到目前为止，我已经尝试了几件事。尝试在每次删除后记录 box-shadow 属性.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 机器上测试过，这个 bug 似乎只在 Mac 上。我不是 100% 确定这是否是根本原因，但我肯定会在其他机器上测试它以确保确定。

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

4

2 回答 2

2

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

无论如何，如果您需要保持 CSS 原样，这里有一个远非优雅的解决方案，但它确实有效：

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

它涉及每次删除元素时对容器进行浏览器重绘：

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

这种技术取自这里：

https://stackoverflow.com/a/8840703

于 2016-03-02T21:55:16.067 回答
-1

奇怪的是，如果您删除容器 DIV 上的浮动，它会解决问题：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/的代码的任何外部容器

于 2016-03-08T20:20:41.987 回答