Question

我正在处理的网站（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快速查看它...

Answer 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 -->

它实际上将回车符（导致空白问题）放在注释中，所以它基本上就是将所有img标签放在一起，但是使用这种表示法可以保持代码缩进。

Answer 2

如果问题与空白相关，您还可以尝试在所有相关元素/ DIV /包装上明确设置line-height或font-size为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具有font-size: 0; - 因为它们不包含任何文字;这将解决图像可能存在的任何空白问题。

另外，请确保您的包装DIV有background-color以匹配灰色。这不是一个神奇的子弹，但它应该隐藏最外面的1px线，使问题远没那么突出。

Internet Explorer图像渲染1像素关闭

2 个答案: