Question

我在这里有布局：http://jsfiddle.net/chricholson/susXf/11/

在Chrome和Firefox中，您会注意到红色框边缘与图像之间有1个像素的间隙。在IE 8中，这不存在（如预期的那样）。

如果我使用像素指定宽度和填充，则不会发生这种情况。

我的猜测，虽然我不能确定，是由于百分比的计算以及数字的四舍五入。填充的6％为20.94px，p的宽度为328.06。假设两者都向下舍入（尽管第一个应该向上舍入），那么总宽度是348px，这似乎是问题的原因。 IE可能更智能，更正确地完成了吗？

然而，还有其他人遇到同样情况并找到了解决办法吗？

Answer 1

错误实际上是由于您的父元素造成的。宽度设置为349px。根据可用的屏幕空间，某些浏览器默认会向上或向下舍入。

使用百分比时，使用漂亮的宽度通常是一种很好的做法。

解决方案：http://jsfiddle.net/vonkly/susXf/29/

此解决方案允许使用未设置的任意图像宽度来定义包装元素的宽度，从而定义子span和<p>宽度。这样就可以实现OP的目标，而无需手动输入自定义类或宽度声明。

<强> CSS

img {
    width: 100%;
    max-width: 100%;
}
.videoThumb {
    position: relative;
    display: inline-block;
    padding: 0;
}

.videoThumb .details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #000;
    background-color: red;
}
.details p {
    display: block;
    padding: 14px 4%;
    margin: 0;
}

<强> HTML

<div class="videoThumb">
    <img src="http://www.chainreactiondisco.com/images/disco_panel_02_01.jpg">
    <span class="details">
        <p><!-- containing element for black box -->
            Watch<br />
            Signature Manager vs. Mail Dislcaimers
        </p>
    <span><!-- /details -->
</div><!-- /videoThumb -->

注意的

如果您打算在<p>内使用任何span.details代码，我建议稍微更改您的CSS。您只需将.details p {}更改为.details span {}即可。然后转到您的HTML并将<p>代码更改为<span>代码。

填充百分比的百分比宽度

1 个答案: