Question

我有一个问题，表格在铬中特别显示（仅限铬合金，适用于FF和野生动物园）。

基本上，表单位于旋转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/ 2）或者只需通过图像使用您自己的单选按钮作为png-24

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

带有CSS动画的Div显示在Chrome中

1 个答案: