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

Question

我有一个表单在 chrome 中显示异常的问题(仅在 chrome 中，适用于 FF 和 safari)。

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

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

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

页面在这里: 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 linear infinite;看起来不错。

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

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