使用CSS剪切图像,使用FireFox和IE7 +时一切看起来都很不错,但是Chrome和Safari并不能很好地接受position:absolute
。实际上,它不是使用“相对”于父容器,而是使用绝对定位坐标。
我尝试过以不同的方式放置容器并放置容器,但是我没有任何运气。
不幸的是,我无法直接提供任何示例。
这是HTML:
<div class="grayBkgd marginTop10Px grid_3 grayVideoContainer alpha">
<a href="?ytID" class="noUnderlineHover curser-pointer">
<div class="clip">
<img src="an image" alt="" />
</div><br />
<div class="videoTextInfo">
<p class="videoTitle">Optical Windows Overview
</p>
</div>
<p class="grayText" style="float:right">0:37 mins</p>
</a>
</div>
CSS:
<style type="text/css">
.grayVideoContainer{
text-align:center;
padding:3px 0 5px 0
}
.clip img {
position:absolute;
margin-left:-58px;
clip:rect(12px 120px 79px 0)
}
.videoTextInfo {
min-height:60px;
padding:70px 5px 0 5px;
color:#000
}
.grayText {
float:right;
margin-top:-10px;
padding:0 5px 0 0
}
</style>
有任何想法吗?
我尝试寻找JQuery插件来裁剪图像,看看是否可以更轻松地定位元素,但是我没有太多运气找到任何有前途的插件。
最佳答案
父容器是否放在所有位置?如果不是,请尝试将position: relative;
添加到position: absolute;
的孩子的父母。相对位置不会更改父级在网站流中的位置,但可以让您绝对定位子级。