Internet Explorer圖像渲染關閉1個像素

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是完全透明的;他們得到的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; 
} 
} 

最後，爲了節省帶寬，頂部和底部以及左和右框架件是實際相同的圖像，他們只是通過CSS翻轉之前正在裝入：

​​

現在，這一切在火狐，Chrome，Safari和移動Safari瀏覽器最多能正常工作從顯示器尺寸的智能手機一路到27inch的iMac

但

你猜對了：Internet Explorer有一個問題它：底部和右鏡以某種方式是一個像素截止，模糊了背景圖像和創建難看線...

見自己：imgur.com album（初圖像窗口7 IE11，第二視窗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%; 
} 

所以，問題是：我能做什麼？或者至少，我可以在哪裏開始調試？現在我完全失去了...

我知道代碼有點複雜，我盡我所能總結它，但大多數相關的代碼散落在幾個媒體查詢，所以也許你需要快速看看它與螢火蟲...

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

如果問題爲空白有關，你也可以嘗試明確了line-height或font-size設置爲0，在所有相關的元素/分隔/封裝 - 然後在您的中心重新建立的line-height /字體大小內容區域。

如果問題仍然存在，另一種呈現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行，使問題變得不那麼突出。