Question

完全。标题是什么。

我在点击箭头按钮时使用input-checked hack可以看到下拉菜单。然后可以通过单击十字按钮再次关闭它。 “按钮”是标签内的跨度。 html看起来像这样：

    <div>
        <input id="pubs" type="checkbox">
        <label for="pubs" onclick><span></span></label>
        <h3>Pubs</h3>

        <ul>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
        </ul>
    </div>

由于输入/标签对和下拉菜单需要位于相同的父级内才能使黑客工作，并且我希望标签区域的背景颜色和不同的颜色（对于下拉菜单，我使用的水平线性渐变如下所示：

div {
    background-image: linear-gradient(yellow 4em, transparent 4em);
    background-size: 100%;
}

其中4em是可见区域的高度。如果您打开Chrome并将该代码复制并粘贴到this CSS patterns gallery中，则可以正常运行。但是，它在实现点击和放大时不起作用。节目;该东西看起来是透明的，只有当您单击黄色背景显示的箭头按钮时。查看 DEMO 。在FF中打开它然后在Chrome中打开以查看我的意思。

我不确定问题出在哪里，我甚至对供应商前缀发疯以使其工作，但失败了。你能重现这个问题吗？有没有人知道出了什么问题？我已经没想完了。

干杯！

Answer 1

你忘记了第一站。

更改渐变：

background-image: linear-gradient(yellow 4em, transparent 4em);

要：

background-image: linear-gradient(yellow 0, yellow 4em, transparent 4em);

Answer 2

不确定是否相关，但4年前报告的Chrome中的渐变仍存在问题。

参考：https://code.google.com/p/chromium/issues/detail?id=41756

不确定Chrome上的渐变错误或我的代码中是否有错误

2 个答案: