浏览器的1px计算问题（子像素问题） [英] 1px calculation issue with browsers (sub-pixel problems)

问题描述

我认为这个问题很常见，在SO本身就是这个问题，但是找不到解决方法。

：

当您调整窗口大小时，您会注意到两个图像的高度有时会相差1px（这是浏览器调整尺寸时预期的） / p>

如何修复这个UI问题？我知道我可以通过使用 flexbox 来做到这一点。但我想有一个更好的解决方案。你们可以跳进去吗？

table {width：100％; border-collapse：collapse;} img {display：block; width：100％;}

< table> < TR> < td>< img src =http://placehold.it/100x100/>< / td> < td>< img src =http://placehold.it/100x100/>< / td> < / table>

当我使用 display：table ：

  .wrapper {width：100％; display：table;}。wrapper div {display：table-cell; } img {display：block; width：100％;}  

< div class =包装> < div>< img src =http://placehold.it/100x100/>< / div> < div>< img src =http://placehold.it/100x100/>< / div>< / div>

b
$ b
在Firefox浏览器中没有问题，但在Chrome中存在。

请注意，当我使用 flexbox 时，问题不存在：

body {margin：0; } .wrapper {width：100％; display：flex;}。wrapper div {flex：1; } img {display：block; width：100％;}

< div class =包装> < div>< img src =http://placehold.it/100x100/>< / div> < div>< img src =http://placehold.it/100x100/>< / div>< / div>

或者使用浮动内嵌块：



  body {margin：0; } .wrapper {width：100％; display：block;}。wrapper div {display：inline-block;向左飘浮; width：50％;} wrapper：after {content：'';显示：内联块; clear：both;} img {display：block; width：100％;}  

< div class =包装> < div>< img src =http://placehold.it/100x100/>< / div> < div>< img src =http://placehold.it/100x100/>< / div>< / div>

pixel-problems-in-css />子像素问题。



每个图像占用容器的50％。例如，如果容器的宽度是100px，则每个图片的宽度将是50px。

但是容器的宽度可能是奇数个像素。 101px。然后有三个合理的可能性：

• 制作一个图像宽度为50px，另一个为51px。然后，即使您为两个图片指定了相同的宽度，图片的宽度也不会相同。
  
• 将图片宽度设置为50px。然后会有一个1px的差距


• 使图像宽度为51px。然后他们不适合，溢出容器或包装到下一行。

每个选择都有其缺点，但现在的浏览器似乎更喜欢第一个选项。然而，在这种情况下，图像有一个固有的长宽比，所以不同的宽度将产生不同的高度，然后1px的差距是水平的而不是垂直的创建。

似乎火狐检测出来，从而使较小的图像一样高，打破了纵横比。 Chrome更喜欢强调宽高比。

没有办法改变这个。这完全是依赖于实现：

特别奇怪的部分是，真的没有
正确或错误， 这里。这个行为应该如何实现
渲染引擎并不是由CSS规范来决定的，因为
被放在实现中去渲染，因为它看起来合适。

I think this issue is common and picked it up here in SO itself, but could not find how to solve this.

Problem:

When you resize the window, you will notice that the height of the two images will differ by 1px at times (that is expected when browser adjusts the dimesions).

How do I 'fix' this UI issue? I know I can do that by using a flexbox. But I guess there is a better solution. Could you guys jump in?

table{
  width:100%;
  border-collapse: collapse;
}
img{
  display: block;
  width: 100%;
}

<table>
  <tr>
    <td><img src="http://placehold.it/100x100"/></td>
    <td><img src="http://placehold.it/100x100"/></td>
  </tr>
</table>

or even here when I use display: table:

.wrapper{
  width:100%;
  display: table;
}
.wrapper div{
  display: table-cell;  
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

Edit: The issue not there in Firefox browser but exists in Chrome.

Note that the issue is not there when I use a flexbox:

body{
  margin: 0;  
}
.wrapper{
  width:100%;
  display: flex;
}
.wrapper div{
  flex: 1;  
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

or using floats and inline-blocks:

body{
  margin: 0;  
}
.wrapper{
  width:100%;
  display: block;
}
.wrapper div{
  display: inline-block;
  float: left;
  width:50%;
}
.wrapper:after{
  content: '';
  display: inline-block;
  clear:both;
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

解决方案

That's because of Sub-Pixel Problems.

Each image takes 50% of the container. For example, if the container is 100px wide, each image will be 50px wide.

But the width of container could be an odd number of pixels, e.g. 101px. Then there are three reasonable possibilities:

• Make one image 50px wide and the other 51px. Then the images won't be equally wide, even if you specified the same width to both of them.
• Make both images 50px wide. Then there will be a 1px gap
• Make both images 51px wide. Then they won't fit, overflowing the container or wrapping to the next line.

Each choice has its downsides, but nowadays browsers seem to prefer the first option. However, in this case, the images have an intrinsic aspect ratio, so different widths will produce different heights, and then the 1px gap is created horizontally instead of vertically.

It seems Firefox detects than, and thus makes the smaller image as tall as the other one, breaking the aspect ratio. Chrome prefers to enforce the aspect ratio.

There is no way to change this. It's completely implementation dependent:

The especially strange part, in all of this, is that there’s really no right, or wrong, here. How this behavior is supposed to play out by the rendering engine isn’t dictated by the CSS specification, having it be left up to the implementation to render as it sees fit.

这篇关于浏览器的1px计算问题（子像素问题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！