【发布时间】：2016-09-18 18:25:16
【问题描述】：
我正在开发的网站 (schmuckzauberwelt.ch) 周围有一个精美的框架，可以根据可用的视口动态调整。为了保持主站点可用，框架不是一个图像，而是分成四块（上、右、下、左），围绕主站点定位。 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 是完全透明的；他们将 z-index 设为 1，以便将它们放在主站点上：
#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;
}
}
最后，为了节省带宽，顶部和底部以及左右框架块实际上是相同的图像，它们只是在加载之前通过 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 快速查看一下...
【问题讨论】：
标签： html css internet-explorer