html - 背景颜色不适用于相对对象，但适用于绝对定位

Question

我不知道这是如何/为什么会发生......但我一直在从头开始重建一个界面，因为旧的界面很糟糕且不可靠。

无论如何，我有充当“按钮”的 div。我分配给它们的渐变背景不起作用，然后我偶然发现了一个有趣的行为...如果我将位置属性设置为绝对而不是相对，背景就会显示。

这是我的例子: 1) Absolute positioning 2) Relative positioning

有问题的部分(CSS 方面)在这里:

.banner > .button {
position: relative;
top: 10;
display: inline-block;
height: 85%;
min-width: 80px;
margin-top: auto;
margin-bottom: auto;
text-align: center;
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.banner > .button > span {
    left: 30%;
}
.blueGlass {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b679e+0,2b88d9+50,207cca+51,7db9e8+100&0.48+0,0.58+100 */
    background: -moz-linear-gradient(top,  rgba(59,103,158,0.48) 0%, rgba(43,136,217,0.53) 50%, rgba(32,124,202,0.53) 51%, rgba(125,185,232,0.58) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(59,103,158,0.48) 0%,rgba(43,136,217,0.53) 50%,rgba(32,124,202,0.53) 51%,rgba(125,185,232,0.58) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(59,103,158,0.48) 0%,rgba(43,136,217,0.53) 50%,rgba(32,124,202,0.53) 51%,rgba(125,185,232,0.58) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a3b679e', endColorstr='#947db9e8',GradientType=0 ); /* IE6-9 */
    color: white;
}
.blueGlass:hover {
    -webkit-box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    -moz-box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    cursor: pointer;
}

对于为什么会发生这种情况，以及更重要的是我如何解决它有什么想法吗？

谢谢!

Answer 1

第一期是，

.banner {
    ...
    min-height: 40px;
}

只需将其更改为，

.banner {
    ...
    height: 40px;
}

因为如果您对子元素使用百分比height值。您必须为父包装器提供固定高度。否则它将无法按您的预期工作。

参见示例:https://jsfiddle.net/23qp2j8b/4/

---

下一期是，

删除跨度中的verticalCenter。并将这些样式添加到 button > span,

.banner > .button > span {
    ...
    padding: 6px 15px;
    display: block;
}

完整修复示例:https://jsfiddle.net/23qp2j8b/5/

希望这是您所需要的! ;)