我不知道这是怎么/为什么发生的。。。但是我一直在从头开始重新构建一个界面，因为旧的界面很笨拙而且不可靠。
无论如何，我有充当“按钮”的div。我分配给他们的渐变背景不起作用，然后我偶然发现了一个有趣的行为...如果我将position属性设为绝对而非相对，则会显示背景。
有问题的部分（明智的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;
}
关于为什么会发生这种情况的任何想法，更重要的是我如何才能解决它？
谢谢！
首先是
.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/
希望这就是您所需要的！;）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句