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

时间:2014-08-15 12:37:25

标签: css google-chrome checkbox linear-gradients

完全。标题是什么。

我在点击箭头按钮时使用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中打开以查看我的意思。

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

干杯!

2 个答案:

答案 0 :(得分:3)

你忘记了第一站。

更改渐变:

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

要:

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

答案 1 :(得分:0)

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

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