百分比宽度与百分比填充

我这里的布局：http://jsfiddle.net/chricholson/susXf/11/百分比宽度与百分比填充

在Chrome和Firefox，你会发现有红色框和图像的边缘之间的1个像素的差距。在IE 8中，这不存在（如预期的那样）。

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

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

然而，有其他人遇到了同样的情况，并找到了解决？

来源

2011-09-19 Chris

我在Chrome浏览器中看不到任何差距13.0.782.220 m – Kyle

这与我的相同版本.... :(关于不同的浏览器呢？ – Chris

嗯，如果我使用Firefox并调整窗口大小，我可以看到它固定和打破所以一个状态它会很好，拖动窗口一个像素或更小，它会打破。铬不会这样做，它总是打破。 – Chris

错误实际上是因为你的父元素引起的。您的宽度设置为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 -->

注意

如果您打算使用span.details内的任何<p>标签，我建议您改变一下css。您只需将.details p {}更改为.details span {}即可。然后转到您的HTML并将<p>标签更改为<span>标签。

来源

2011-09-19 09:44:02 Ben

这解决了我在Chrome中的问题，但在Firefox和IE8中，我现在看到红色框超出图像宽度扩展1px。毫无疑问，如果我算出数学，那么数字也会有类似的问题。你能重现我所看到的错误吗？只是为了确认它不只是我，因为凯尔似乎无法看到相同的东西 – Chris

好吧，数字应该加起来正确，所以不知道为什么我看到它扩大比框更广泛。 – Chris

我无法重新创建错误。但是，因为你的父元素是一个固定的宽度......为什么没有'P'元素也是一个固定的宽度呢？ http://jsfiddle.net/vonkly/susXf/23/ – Ben

百分比宽度与百分比填充

回答

相关问题