Question

我有一个标签，周围有9px的填充。在FF和IE8中看起来很好，但不是IE7。它会“缩小”标记。这对于观看者来说是显而易见的，因为标签具有用于背景的半透明PNG，您可以看到它不像其他人那样触及包含<div>的右侧2个浏览器。

没有进入“为什么”，我的问题就是这样：有没有办法获得带有9px填充的标签来填充IE7中的可用空间而无需指定宽度（像素）或百分比）？

谢谢！

示例HTML代码：

<a href="#">
    <img class="off" src="image1.png" />
    <img class="on" src="image2.png" />
    <p>Some copy.</p>
</a>

示例CSS代码：

a {
    position: absolute;
    top: 100px;
    left: 100px;
}

a img.on {
    visibility: hidden;
    position: absolute;
    top: -10px;
    left: -10px;
}

a:hover img.on, a:hover p {
    visibility: visible;
}

a p {
    position: absolute;
    visibility: hidden;
    bottom: 0px;
    left: 0px;
    padding: 8px;
    background: url(bg.png) repeat;
}

Answer 1

你的例子并没有真正帮助我，因为它没有真正说明问题。尝试将p的宽度和高度设置为100％。您可能会发现它稍微过大，在这种情况下，您需要将IE6 / 7的宽度和高度设置为直接像素大小的高度和宽度减去填充值（x2作为其两侧）。

Answer 2

不幸的是，因为第二张图片比第一张图片大，所以将设置为100％的宽度会让它太长。

我在JQuery中创建了一个动态解决问题的解决方案。它通过从中获取填充顶部值（在CSS中定义），将其乘以2，然后从第一个图像的宽度（.off）中减去它来设置宽度。这似乎是一种更优雅的方式，因为您可以更新CSS中的填充而无需更新JQuery代码，并且您不必将静态宽度信息放入CSS文件中。这似乎适用于所有浏览器。

是否有IE7填充变通方法而没有指定尺寸？

2 个答案: