我有这个:
.ce_text.forward {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #F8F8F8;
color: #2d353c;
}
.ce_text.forward p {
position: relative;
}
.ce_text.forward .fill_bottom {
width: 500px;
height: 500px;
bottom: 0;
left: -865px;
position: absolute;
margin: auto;
background-color: #ecedee;
top: 0px;
right: 0;
transition: left 0.3s linear 0s;
transform: rotate(45deg);
}
.ce_text.forward:hover .fill_bottom {
left: 0;
}
<div class="ce_text forward block"><div class="fill_bottom"></div>
<p><a href="" target="_blank"><strong>Headline</strong>Test Test test test<span>Lesen Sie mehr</span></a></p>
</div>
它在chrome中工作,但在firefox中不行,有人能帮我处理css吗?
发布于 2014-09-18 02:48:00
火狐的问题似乎是由margin: auto
的使用引起的。我已经完全重建了你的榜样来消除这个问题。
新的和改进的
<a>
包装器为中心。bottom: 50%
和负的底部边缘为其高度的一半。旧溶液
存档的-固定高度选项(不转换,应该返回到IE8)
我对此有不同的看法:
z-index: -1
将伪元素保留在文本后面。overflow: hidden
会阻止滚动条。
* {
margin: 0;
padding: 0;
}
.headline {
height: 100px;
background: #333;
color: #FFF;
position: relative;
z-index: 2;
display: inline-block;
width: 100%;
height: 0;
padding: 30px 0 70px 50px;
overflow: hidden;
}
.headline:before {
width: 30%;
content:'';
display: block;
height: 100px;
background: #F00;
position: absolute;
top:0;
left: 0;
transition: all 0.3s linear 0s;
z-index: -1;
}
.headline:after {
content: '';
display: block;
border-bottom: solid 50px transparent;
border-top: solid 50px transparent;
border-left: solid 50px #F00;
height: 0;
width: 0;
left: 30%;
position: absolute;
top:0;
transition: all 0.3s linear 0s;
z-index: -1;
}
.headline:hover:before {
width: 100%;
}
.headline:hover:after {
left: 100%;
}
<h1 class="headline">Text</h1>
https://stackoverflow.com/questions/25908716
复制相似问题