css - IE7 的相对布局问题

Question

相对定位 span 和 img 在 IE7 中没有正确定位的问题。您可以在以下位置查看问题:

http://bookgroupaustralia.obiweb.com.au/

“NEW”和“SALE”跨度应位于标题的右上角，购物车图像位于右下角。它们在 IE8、FF、Safari、Chrome 中正确定位。在 IE7 中，它们的显示低于预期。

Answer 1

IE7 似乎没有正确获取边距。

尝试在您的 productItem 类上设置一个 position: relative; 声明。然后，不要为您的 .listing span.badge 类设置边距值，而是尝试设置以下值:

top: 0;
left: 0;

您还需要制作购物车图标(您的 img.cart 类)。同样，您希望此图像绝对定位在每个列表项的右下角:

.listing ul li.productItem img.cart, .listing ul li.productItemLast img.cart {
    bottom: 5px;
    cursor: pointer;
    position: absolute;
    right: 5px;
}

您可能需要稍微调整底部和右侧的位置。这应该可以解决。