Google Chrome 特定情况下border设置1px会出现断线bug

摘要

我们在对组件进行定制开发的过程中会遇到许多的问题和各种兼容性的问题，我们要不断尝试去解决这些问题，并记下自己解决过程，这种方式也是一个不错的学习积累的过程。

页面展示效果如图：

在对下拉菜单进行定制开发的过程中，出现了 border 断线的现象，并且在缩放页面或者点击下拉菜单的时候，边框会再次出现，而另一组与它共享同一个样式的下拉菜单并没有出现这样的问题，这个问题困扰了很久。然后对问题一步步进行了分析：

1、猜测是否只在 Google chrome 下才会出现这样的问题。

至此，我将项目在 Firefox 下重新运行，发现不存在边框断线的问题。

所以可以推断出是Google Chrome浏览器的兼容问题。

2、猜测是否是 Google Chrome 解析代码的时候优先级的问题。

将相应的 div 设置 Z-index 使它强制显示，发现当前的问题解决了，但是又出现的心得问题。与它共享样式的兄弟 div 覆盖了它本身的子孙元素。
如图：

由于这里涉及到子孙元素的下一级，像这种四级甚至更多级的 Z-index的优先级的问题，网上很少有人提及，我们不可能在开发的过程中去