Question

使用CSS 3之后，我有了一个疯狂的想法，用它制作一个OS X风格的底座（一个带有元素的DIV容器，使用CSS：hover子类，在鼠标悬停时增加大小）。但是，实现它时我遇到了一些奇怪的效果。到目前为止，这是我尝试过的：

代码

<html>
<head>
<style>
body{
    margin:0;
}
.dockHolder{
    width:100%;
    position:absolute;
    text-align:center;
    display:block;
    bottom:0;
}
.dock{
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    text-align:center;
}
.dockItem{
    height:50%;
    display:inline-block;
    position:relative;
    bottom:0;
    vertical-align:bottom;
    text-align:center;

    transition-property:width, height;
    -o-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:linear;
    -o-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -webkit-transition-timing-function:linear;
}
.dockItem:hover{
    height:100%;
    width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
    <div class="dock" style="background-color:lightgray;">
        <center>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
        </center>
    </div>
</div>
</body>
</html>

我的测试页面位于 ~~http://s.supuhstar.operaunite.com/s/content/testAnims.htm~~ （与Opera Unite一起死亡），如果你想看看我到目前为止所拥有的。

缺少功能

意外影响包括：

无法将dock元素放在dockHolder元素的底部
dockItem元素不会与其子图像一起以宽度方式展开
dockItem和dock元素不会在CSS dockHolder容器中居中（已尝试margin:auto;，box-pack:center;，box-align:center;等。）;只有<center> HTML标记有效
在Opera和Firefox中（我放弃了IE），dockItem非常宽

不存在的

预期效果包括：

dockItem保留在dock元素中，直到调整大小，此时它们会与dockHolder元素的大小成比例增加，但dock元素保持不变大小
dock元素的宽度足以包含其中的所有dockItem，并且永远不会宽于不短于所有dockItem及其边距的组合宽度。< / LI>

问题

是否有人有解决方案可以解决意外影响并实施缺席的预期效果？

最终实施

以下是我最终解决方案的代码：

<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
    margin:0;
}
.dockHolder {
    position: fixed;
    text-align: center;
    bottom: 0; 
    left: 0;
    right: 0;
    height: 128px;
    line-height: 128px;
}

.dock {
    background:#CCCCCC;
    background:
        -o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    border: 1px solid gray;
    max-width:100%;
    vertical-align: bottom;
    line-height: 1em;
    padding: 0 8px;
    border-radius: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dockItem {
    display: inline;
    height: 50%;
    vertical-align: bottom;

    transition-property:width, height;
    -o-transition-property:width, height;
    -ms-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -ms-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    -ms-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
    height: 100%;
}
.dockItem:active {
    vertical-align:top;
    height:95%
}
</style>
</head>
<body>
    <div class="dockHolder" style="height:128px;line-height:128px;">
        <span class="dock">
            <img class="dockItem" src="pony.png"/>
            <img class="dockItem" src="bhs256.png"/>
            <img class="dockItem" src="mcgrass.png"/>
        </span>
    </div>

</body>
</html>

工作示例（可能会过时）： ~~http://admin.s.supuhstar.operaunite.com/s/content/testDock.html~~ （死于Opera Unite）

Answer 1

这是怎么回事？

HTML：

<div class="dockbg"></div>
<div class="dock">
    <img src="foo.png">
    <img src="bar.png">
</div>

CSS：

.dockbg {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: #bbb;
}

.dock {
    position: fixed;
    text-align: center;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 100px;
    line-height: 100px;
}

.dock img {
    display: inline-block;
    vertical-align: bottom;
    height: 50%;
    padding: 0 5px;
    /* + your animation properties */
}


.dock img:hover {
    height: 100%;
}

现场演示： http://jsfiddle.net/simevidas/QM7M7/3/show/

Answer 2

对我来说，问题来自于您没有指定固定的事实宽度尺寸。我的想法是取消dockItem类，你不需要它。直接使用CSS img类。
要使元素居中，请使用“margin：auto 0px auto 0px;”。
首先，使用重置，它将帮助您正确执行：http://html5doctor.com/html-5-reset-stylesheet/#comment-18168
你应该展示一下：块;和浮动：左;比显示：inline-block;
您应该使用<ul>和<li>元素来帮助您。

Answer 3

使用javascript和css将悬停图标前后的图标设置得更大，以获得更流畅的动画效果;）

制作纯CSS Dock

代码

缺少功能

问题

最终实施

3 个答案: