CSS 边距捕获点击事件，仅在 Chrome/Windows 中

Question

我有一个通用的 Wordpress 博客，有一个通用的主题。我发现在 Windows 上的 Chrome 中，最大化浏览器窗口会导致部分页面被禁用 - 没有鼠标悬停事件，没有点击事件，什么都没有。

事实证明，隔壁的 div 的边缘区域正在捕获点击。仅在 Windows(Vista 或 7)上的 Chrome(30 或 31)上发生，并且仅在窗口最大化时发生。

试试 https://content.neit.edu/courseware/201410nur370/
显示如何重现步骤的截屏视频位于 https://www.kaltura.com/index.php/extwidget/openGraph/wid/1_nvbbym8w

如果您将 ?debug 添加到 URL，它将显示一个警告，显示被点击的目标元素。

我认为这是一个浏览器渲染错误，但是否有我在 CSS 中没有看到的导致该问题的原因？似乎边距捕获点击事件应该是不可能的，不是吗？

Answer 1

问题在于用 #primary 包裹 #content:因为 #primary 的宽度为 100% 并且是 float 的，它覆盖了 #secondary。

您需要调整这些值，但这应该能让您接近:

.left-sidebar #primary {
    float: right;
    margin: 0;
    width: 75%;
}
.left-sidebar #content {
   margin: 0 7.6% 0 0;
   width: 90%;
}

考虑两个容器:primary 和 secondary。使用这些容器进行布局，然后您可以让内容占据其父级宽度的 100%，将您的填充等应用于子级。

我还会注意到，在 Chrome 31 和 Windows 上的金丝雀中，无论窗口大小如何，该区域都会被覆盖(点击发生在 #primary 上)。