CSS：帮助在 Chrome/Safari 中定位剪切图像。 IE 和 FireFox 看起来不错
使用 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 插件来剪辑图像，看看是否可以更轻松地定位元素，但我没有找到任何有前途的插件。
Clipping an image with CSS and everything looks great with FireFox and IE7+, but Chrome and Safari are not accepting the position:absolutevery nicely. Instead of staying "relative" to the parent containers, it's in fact using the absolute positioning coordinates.
I've tried putting containers and positioning those in different ways, but I'm not having any luck.
Unfortunately, I can not provide any example directly.
Here's the 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>
The 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>
Any ideas?
I tried looking for JQuery plugins to clip the image and see if I'd have an easier time positioning the elements, but I didn't have very much luck finding any promising plugins.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
父容器是否已定位？如果没有，请尝试将
position:relative;添加到position:absolute;子级的父级。相对定位不会改变父级在网站流程中的位置，但允许您拥有绝对定位的子级。Are the parent containers positioned at all? If not, try to add
position: relative;to the parent of the child that'sposition: absolute;. The relative positioning won't change the parent's position in the flow of your site but will allow you to have absolutely positioned children.绝对定位元素的位置应使用
top、left、right和/或bottom指定。请参阅：http://www.w3schools.com/css/pr_class_position.asp
< code>margin-left on
.clip img我可能希望不起作用。An absolutely positioned element's position should be specified with
top,left,right, and/orbottom.See: http://www.w3schools.com/css/pr_class_position.asp
The
margin-lefton.clip imgI might expect not to work.