带有 css 动画的 Div 在 Chrome 中特别显示

Question

我在 chrome 中特别显示表单时遇到问题（仅在 chrome 中，适用于 FF 和 safari）。

基本上，表单位于旋转 div 的顶部，z-index:2，后面的动画有 z-index:1

当我给表单一个更高的 z-index 时，单选按钮后面突然有一个白色方块，就像背景颜色一样，只不过没有背景颜色。此外，原本应该是黑色的文本阴影变成了白色。我无法消除这些影响，也不知道为什么会发生这种情况。

有人知道如何解决这个问题吗？

页面在这里： http://fatdogcs.com/rdv/index-test.html

就是这样在 Chrome 中看起来像： http://dl.dropbox.com/u/8974822/test.jpg

滚轮旋转的CSS代码：

#Wheel{
    background-image:url(../images/circle.png);

    -webkit-animation: rotateWheel 60s linear infinite;
    -moz-animation:    rotateWheel 60s linear infinite;
    -ms-animation:     rotateWheel 60s linear infinite;

    height:370px;
    width:370px;    
    position: absolute;
    top: 195px;
    left: 315px;
    z-index: 1; 
}

表单div的CSS代码：

#Over18Form{
    width:  225px;
    margin: 0 auto;
    position:absolute;
    top: 300px;
    left: 387px;
    z-index: 2;
}

Html代码是：

    <div id="Wheel"></div>
    <div id="Over18Form">
        <form>
            <div id="Over18"></div>
            <input type="radio" name="age" id="Yes" />
            <label for="Yes" style="margin-right:10px;">Yes</label>
            <input type="radio" name="age" id="No" />
            <label for="No">No</label>

            <div id="ChooseLanguage"></div>
            <input type="radio" name="language" id="English" />
            <label for="English" style="margin-right:10px;">English</label>
            <input type="radio" name="language" id="Chinese" />
            <label for="Chinese">中文</label>
            <div class="clear" style="margin-bottom:30px;"></div>
            <button type="submit">Enter</button> 
        </form>

Answer 1

当我删除 -webkit-animation:rotateWheel 60s 线性无限时，我尝试了一些东西；看起来还不错。

我建议：
1）使用JavaScript来旋转轮子，试试这个插件： http://ricostacruz.com/jquery.transit/< /a>
2）或者只是通过图像使用您自己的单选按钮作为png-24

（在将边框、div和-webkit-border-raidus与不同的z-index动画组合时，我遇到了类似的问题。）