html - 响应式，百分比图像差距问题

Question

是否有解决方法可以消除缩放浏览器窗口时出现在第二张图片下方的 1px 间隙？

图片 1 的宽度为 66.66666%，图片 2 的宽度为 33.33333% - 奇怪的是，移除 1px 的边距可以解决问题，但我需要 1px 的间隙!

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

这是 fiddle :http://jsfiddle.net/Azj7D/

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

确实是像素舍入。我已经用一个解决方案 fork 了你的 fiddle ，它绝不是美丽的，但它确实有效:http://jsfiddle.net/X73EU/ .

使用

display: table-cell

在列上并使第二个图像绝对定位似乎可以做到。