html - Internet Explorer 图像渲染 1 像素关闭

Question

我正在处理的网站 ( schmuckzauberwelt.ch ) 周围有一个精美的框架，可以根据可用的视口(viewport)动态调整。为了保持主站点的可用性，框架不是一张图片，而是分成四 block (上、右、下、左)放置在主站点周围。 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 -->

这四个 .png 是完全透明的；他们获得 1 的 z-index 以便将它们放在主站点上:

#mirror-top,
#mirror-bottom,
#mirror-left,
#mirror-right {
    z-index: 1;
    position: absolute;
background-repeat: no-repeat;
}

然后一堆媒体查询为它们提供正确的大小/位置并加载实际的帧图像作为背景(这里有一个例子):

@media (min-height: 600px) and (max-height: 647px) and (min-width: 1000px),
(min-width: 1000px) and (max-width: 1079px) and (min-height: 600px) 
{
[...] 
#mirror-top,
#mirror-bottom {
width: 1000px;
height: 100px;
background-image: url(mirror-long-600px.jpg);   
}
#mirror-bottom {
top: 500px;
}
#mirror-left,
#mirror-right {
width: 100px;
height: 400px;
top: 100px;
background-image: url(mirror-short-600px.jpg);
}
#mirror-right {
    left: 900px;
}
}

最后，为了节省带宽，顶部和底部以及左右框架 block 实际上是同一张图像，它们只是在加载之前通过 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 有一个问题:底部和右边的镜子不知何故偏离了一个像素，模糊了背景图像并产生难看的线条...

自己看看:imgur.com album (第一张图片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 快速看一下......

Answer 1

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

我首先要尝试的是删除 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 标记彼此相邻放置一样，但是使用这种表示法可以使代码缩进.