Html Internet Explorer图像渲染1像素

我正在处理的网站（）周围有一个奇特的框架，可以根据可用的视口进行动态调整。为了保持主站点的可用性，框架不是一个图像，而是切割成四个部分（顶部、右侧、底部、左侧），这些部分位于主站点周围。html代码的要点如下：

<div id="wrapper">
<img id="mirror-top" src="mirror-long.png" alt="" name="mirror-top" /> 
<img id="mirror-bottom" src="mirror-long.png" alt="" name="mirror-bottom" />
<img id="mirror-left" src="mirror-short.png" alt="" name="mirror-left" /> 
<img id="mirror-right" src="mirror-short.png" alt="" name="mirror-right" />
<div id="mainsite">
[...]
</div> <!-- end of mainsite -->
</div> <!-- end of wrapper -->

然后，一系列媒体查询为它们提供了正确的大小/位置，并在实际帧图像中作为背景加载（这里有一个示例）：

最后，为了节省带宽，顶部和底部以及左侧和右侧框架实际上是相同的图像，它们只是在加载之前通过css翻转：

#mirror-bottom,
#mirror-right {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

现在，所有这些都可以在Firefox、Chrome、Safari和Mobile Safari中正常工作，从智能手机的显示屏尺寸一直到27英寸的iMac

但是

你猜对了：Internet Explorer有一个问题：底部和右侧的镜子不知怎么地差了一个像素，模糊了背景图像，形成了难看的线条

亲自查看：（第一个图像为windows 7 IE11，第二个图像为windows 8.1 IE11）

除此之外，我还注意到，当窗口变得如此小时，一切都很好，最小的媒体查询就会进入并用滚动条将站点定位在左上方，而不是水平和垂直居中。 通用代码如下所示：

#wrapper {
z-index: 0;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
}

除了最小的媒体查询外，其他所有查询都有如下内容：

#wrapper {
width: 1000px;
height: 600px;
margin-top: -300px;
margin-left: -500px;
}

对于最小的一个，这个：

#wrapper {
    width: 830px;
    height: 498px;
    top: 0%;
    left: 0%;
}

所以，问题是：我能做什么？或者至少，我可以从哪里开始调试？现在我完全迷路了

我知道代码有点复杂，我尽力总结，但大部分相关代码都分散在几个媒体查询中，因此您可能需要使用firebug快速查看一下……

这看起来像是典型的“内联块元素之间的空白”问题

我首先要尝试的是删除HTML代码中的回车符，如下所示：

<div id="wrapper"><!--
--><img id="mirror-top" src="mirror-long.png" alt="" name="mirror-top" /><!--
--><img id="mirror-bottom" src="mirror-long.png" alt="" name="mirror-bottom" /><!--
--><img id="mirror-left" src="mirror-short.png" alt="" name="mirror-left" /><!--
--><img id="mirror-right" src="mirror-short.png" alt="" name="mirror-right" /><!--
--><div id="mainsite">
[...]
</div> <!-- end of mainsite -->
</div> <!-- end of wrapper -->

[...]

实际上，它将回车（导致空格问题）放在注释中，因此基本上就像您将所有

img

标记放在一起一样，但使用此符号可以使代码缩进。

如果问题与空格相关，您还可以尝试在所有相关元素/div/wrappers上将

行高

或

字体大小

显式设置为0，然后在中心内容区域重新设置行高/字体大小

如果问题仍然存在，另一种呈现HTML布局的方法可能会解决您的问题，那就是将您的内容进一步划分为几个div——非常粗略——如下所示

<div id="wrapper">
    <div id="top"><img id="mirror-top" /></div>
    <div id="middle">
        <div id="left"><img id="mirror-left" /></div>
        <div id="center">Lorem ipsum ...</div>
        <div id="right"><img id="mirror-right" /></div>
    </div>
    <div id="bottom"><img id="mirror-bottom" /></div>    
</div>

乱数假文。。。

在本例中，您将对div应用动态大小调整（可能是百分比），而不是图像，并将图像设置为

width:100%。您根本不需要设置图像的高度

div#left
和
div#right
可以浮动，而
div#center
使用边距/负边距保持独立

确保
#top
、
#left
、
#right
和
#bottom
div具有
字体大小：0-因为它们不包含文本；这将解决图像可能存在的任何空白问题

此外，请确保包装div的背景颜色与灰色相匹配。这不是一个灵丹妙药，但它应该隐藏最外层的1px行，使问题不那么突出。
感谢您的快速响应，但它似乎没有做到这一点。可能是因为显示设置为块而不是内联块…感谢您的回复；我确实试过你建议的潜水艇，但也不是。这也不是空白问题，但水平和垂直居中是问题所在。解决方案：使用边距：自动将网站垂直和水平居中；位置：绝对位置；排名：0；左：0；底部：1；右：0，而不是内容宽度和高度一半的负边距。但它只在最大化的窗口中浏览时有效。。。如果在窗口边框周围拖动，线条仍会出现。似乎是一个辩护的IE问题。。。在其他浏览器中都可以正常工作。
<div id="wrapper"><!--
--><img id="mirror-top" src="mirror-long.png" alt="" name="mirror-top" /><!--
--><img id="mirror-bottom" src="mirror-long.png" alt="" name="mirror-bottom" /><!--
--><img id="mirror-left" src="mirror-short.png" alt="" name="mirror-left" /><!--
--><img id="mirror-right" src="mirror-short.png" alt="" name="mirror-right" /><!--
--><div id="mainsite">
[...]
</div> <!-- end of mainsite -->
</div> <!-- end of wrapper -->

<div id="wrapper">
    <div id="top"><img id="mirror-top" /></div>
    <div id="middle">
        <div id="left"><img id="mirror-left" /></div>
        <div id="center">Lorem ipsum ...</div>
        <div id="right"><img id="mirror-right" /></div>
    </div>
    <div id="bottom"><img id="mirror-bottom" /></div>    
</div>