Question

我有这个代码：http://jsfiddle.net/VV9qJ/但由于某种原因，我似乎无法修复由图像引起的小像素错误。基本上你会注意到一些图像周围有一些像素或两个白色间隙，而有些则没有，特别是当你调整浏览器窗口大小时。每个浏览器也会使白色间隙略有不同。

我的布局不能有任何空白，所有内容必须相互紧密，包括浏览器窗口。

是否有一种确保图像在不同浏览器中始终保持紧密对齐的万无一失的方法？也许jQuery？我已经完成了大量的谷歌搜索，但没有发现任何内容。

还没有找到解决方法。我发现很难相信解决方案不存在，任何人都可以提供帮助吗？

Answer 1

除非我不理解什么是错的，否则我似乎无法用白色间隙重现问题，但听起来它可能是边缘或填充问题。

div.smallLink {
    display: inline-block;
    font-size: 100%;
    margin: 0;
    padding: 0;
    width: 50%;
}

您可能还需要将.smallLink中img标记的边距和填充设置为0。

Answer 2

在groupoflink div

下添加以下代码

字母间距：-4px;

http://jsfiddle.net/VV9qJ/11/

Answer 3

您的问题是div width:100%上的content ..

虽然带有类banner的div也设置为100%宽度占据空间的完整100%，但是当您将100％细分为50% + 50%时，什么是发生的是它将100％的宽度划分为 - 500为250 + 250为你的子划分。但是只有当它的父级（因为它的动态）所采用的宽度是EVEN NUMBER时，除法恰当地发生..即， 2（n）..

否则，50％的分裂没有正确发生，说501是可用空间，这意味着100％宽度的div将占据501的完整空间 - 但是宽度为50％的子div将获得{{ 1}}和250px留下你注意到的1px差距!! ..

要移除空白区域，请提供250px，以便您可以忽略background-color白色空间！{/ p>

这不是解决这个问题的最佳方法 - 应该有一种我现在无法想到的css方式..所以，这是一个JS解决方案..

1px

即父母 - 如果501和第一个50％的孩子将是250，因此第二个孩子将是501-250 +“px”

仅编辑了一组HTML（你应该对其余部分做同样的事情） - 更改为获取父级的id（15为501）和largelin（如果为501 - 这将是250）

function load(){
var largelink = document.getElementById("largelink");
largelink.nextSibling.style.width = largelink.parentNode.offsetWidth-largelink.offsetWidth + "px";
}
window.onload = load;
window.resize = load;

Havnt对它进行了测试..希望它有效..

流体/基于百分比的布局上的图像不对齐

3 个答案: