Question

当缩放浏览器窗口时，是否有解决方法来消除第二个图像下方出现的1px间隙？

图像1宽66.66666％，图像2宽33.33333％ - 奇怪的是，删除1px余量消除了这个问题，但我需要1px的差距！

我认为这是因为浏览器试图渲染半像素，但肯定有办法吗？

HTML：

<div class="row">
  <div class="col wide">
    <img src="http://lorempixel.com/988/494/sports/5/" />
  </div>
  <div class="col">
    <img src="http://lorempixel.com/494/494/sports/5/" />
  </div>
</div>

CSS：

.row
{
  background: red;
  clear: both;
  margin: 0;
  overflow: hidden;
  padding: 0 0 1px 0;
  position: relative;
  z-index: 1;
}

.row .col
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin: 0 0 1px 0;
  overflow: hidden;    
  padding: 0 0 0 1px;
  position: relative;
  width: 33.33333%;
  z-index: 1;
}

.row .col.wide
{
  width: 66.66666%;
}

.row .col img
{
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

非常感谢您的帮助！

Answer 1

确实是像素舍入。我已经用一个解决方案来分配你的小提琴，它绝不是很漂亮，但确实有效：http://jsfiddle.net/X73EU/。

使用

display: table-cell

列上的

并使第二个图像绝对定位似乎是这样做的。

响应性，百分比形象差距问题

1 个答案: