0

我有这个 CSS：

div#dockWrapper{
    width: auto;
    display: inline-block;
    position: relative;
    border-bottom: solid 2px rgba(255, 255, 255, .35);
    line-height: 0; 
    transition: bottom 0.5s;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
}

div#dockWrapper:hover{
    bottom: 77px;
}

而这个 HTML

<div id="dockContainer">
    <div id="dockWrapper">
        <div class="cap left">                  
        </div>
        <ul class="osx-dock">
            <li>
            </li>
        </ul>   
    </div>
</div>

转换在 google chrome 中工作正常，但在 Firefox 和 IE 中不行。我对所有这些 CSS3 动画都是新手，所以也许我需要了解一些基础知识。我还有其他动画

<li></li>

它为我的 HTML 菜单创建了一个“停靠点”，它们在所有浏览器上都可以正常工作，但在“dockWrapper”上却不是“底部”。

谢谢你，西蒙

4

2 回答 2

0

对于非 Firefox/Chrome 浏览器，我添加了-o-transition，这将使旧版 Opera 工作，以及transition，这将使 IE10 工作。IE9 不支持过渡。

然而，Firefox 需要明确声明 X 和 Y 起始位置。试试这个：

#dockWrapper{
    width: auto;
    display: inline-block;
    position: relative;
    left:0;
    bottom:0;
    border-bottom: solid 2px rgba(255, 255, 255, .35);
    line-height: 0; 
    transition: bottom 0.5s;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

我之前在动画菜单项时遇到了同样的问题，应用显式 X/Y 声明解决了它。希望它也适合你。

旁注，我div之前删除了限定符#dockWrapper。只要您的 HTML 有效，您就不会有多个 ID 声明，因此不需要限定 ID。它只是让 CSS 变慢而没有任何好处。

于 2013-06-20T19:23:15.610 回答
0

添加bottom: 0到div#dockWrapper{. 你需要一个过渡的地方。

根据http://caniuse.com/#feat=css-transitions，只有 IE10+ 支持该transition属性。

于 2013-06-20T19:23:58.093 回答