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

【问题标题】：Mis-aligned images on fluid/percentage based layout基于流体/百分比的布局上未对齐的图像
【发布时间】：2012-03-12 18:43:52
【问题描述】：

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

我的布局不得有任何间隙，所有内容必须相互紧密贴合，包括浏览器窗口。

是否有一种万无一失的方法来确保图像在不同浏览器中始终保持紧密贴合？也许是 jQuery？我已经做了很多谷歌搜索，但没有找到任何东西。

仍然没有找到解决此问题的方法。我很难相信没有解决方案，任何人都可以提供帮助吗？

【问题讨论】：

标签： css image image-scaling fluid-layout liquid-layout

【解决方案1】：

除非我不明白出了什么问题，否则我似乎无法重现白色间隙的问题，但听起来可能是边距或填充问题。

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

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

【讨论】：

【解决方案2】：

在您的 groupoflink div 下添加以下代码

字母间距：-4px;

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

【讨论】：

我同意 @VivekChandra 的观点，不幸的是它并不能解决我的问题
它删除了两个相邻内联块之间的 4px 空间（空白）。
是的，但是像素间隙是随机的，具体取决于您使用的浏览器和窗口的大小。例如，我看到垂直间隙和水平间隙，但并非一直都如此。

【解决方案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 将获得@987654328 @ 和 250px 留下你注意到的 1px 差距！！..

要删除空白，请提供background-color，以便您可以忽略爬上来的1px 空白！！

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

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

i.e,Parent -- 如果 501 和第一个孩子 50% 将是 250 因此第二个孩子将是 501-250 + "px"

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

<div id="largeLink" class="largeLink">

没有测试过..希望它有效..

【讨论】：

好的，谢谢您的解释，这是有道理的。您知道可以修复它而不是仅使用背景颜色的 jQuery 方法吗？图像可能会发生变化，并且颜色会有所不同，因此在某些时候线条会很明显。
感谢@VivekChandra，但不幸的是这不起作用。白色间隙仍然出现。 Plus ID 只能在一个页面上使用一次。我认为会有一种纯 CSS 方法来解决这个问题，但到目前为止还没有运气。