Html 跨浏览器解决方案：在图像下可单击链接

我在HTML页面中有一个包含曲线的标题

我的问题：曲线是一张图片&它位于最高的z指数。它的意思是剪掉它下面的一些文本，使其具有最高的z索引。因此，无法单击图像（曲线）下方的任何链接，因为图片位于这些链接之上

下面是简单的JSFIDLE：

如何使图像下方的链接可点击？

我知道的最简单的方法是使图像具有css:pointer事件：none但是这在IE中不起作用&我正在寻找最跨浏览器友好的解决方案

<div id="headerContainer" style="position: relative; width: 100%; text-align: center; background-color: yellow;">
    <div id="header" style="width: 1100px; height: 400px; padding-left: 30px; padding-right: 30px;">
        <ul id="navbar" style="background-color: red; width: 800px; height: 40px; float: left;"></ul>
        <a id="logo" href="www.google.com" style="background-color: red; width: 190px; height: 40px; float: right; margin-top: 15px;">Cant be Clicked</a>

        <br/>
        <div id="cutOffText">
            <p style="padding: 0; margin: 0; font-size: 200px;">ABCDEFG</p>
        </div>
    </div>

    <div id="curveOverlay" style="z-index: 1; position: absolute; left: 0; top: 0; background-image: url('http://i44.tinypic.com/rs8y7m.png'); background-position: center bottom; background-repeat: no-repeat; width: 1100; height: 400px;">
    </div>
</div>

ABCDEFG

---

PS：如果在图片下方无法使链接可点击，你能建议一种HTML布局，我可以使用它来保持外观，但也可以让导航栏链接可点击吗？

简单地说：你不能。不是没有很多努力。为了达到这个效果，你需要把图像变成一个图像贴图，然后确保它是像素级的，与它遮挡的东西完美匹配

老实说，这看起来是个很糟糕的主意，但你可能有一些正当的理由这么做

---

编辑：看起来像是

的副本。您可以将当前位于图形下方的元素置于图形上方，并将其背景设置为基本透明。这样，文本将位于图像上方，而背景颜色似乎位于图形后面或与图形内联。

如果您能够精确控制图像后面内容的布局，则可以使用尺寸相同的“空”链接复制图像上方的布局（我在下图中用绿色虚线勾勒出了轮廓）。

在您的示例中，您可能可以使用旋转曲线的图像。
如果稍微修改曲线，按钮将完全可点击

这不管用吗

#logo {
    position: relative;
    z-index: 10;
}