雖然新做的網站一般不要求兼容IE6，不過對IE7/8/9/10的兼容還是必須的。而有時IE7下也會出現各種神奇的現象，這篇小博文就記錄一下作者今天在IE7下遇到的問題。
首先來看這么一個簡單的頁面，讓圖片在DIV中上下居中顯示：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#test-container
{
width: 300px;
height: 200px;
border: solid 1px #ff0000;
line-height: 200px;
}
#test-container .photo img
{
max-width: 300px;
max-height: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="test-container">
<div class="photo"><img src="http://www.google.com.hk/images/srpr/logo4w.png" alt="Google"></div>
</div>
</body>
</html>
在Firefox，Chrome以及IE9/IE8下顯示都沒問題，如下圖所示：
而在IE7下圖片居然不居中了：
經過一番CSS調整，時間也在一分一秒的流逝，半個小時過去了還是沒有任何結果。
頭疼。。。。。
正當作者要放棄時，一個突然的換行居然起了作用，新的頁面代碼如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#test-container
{
width: 300px;
height: 200px;
border: solid 1px #ff0000;
line-height: 200px;
}
#test-container .photo img
{
max-width: 300px;
max-height: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="test-container">
<div class="photo"><img src="http://www.google.com.hk/images/srpr/logo4w.png" alt="Google">
</div>
</div>
</body>
</html>
現在的顯示效果：
細心的讀者，你看看這兩次的代碼有什么不同？？？？
唯一的不同就是在 IMG 標簽后面多了個換行符！！！！
唉！IE7的BUG
如果你也遇到了類似的問題，希望這篇博文能夠幫助到你。
========================
有網友在評論中提到是否 img 標簽沒閉合導致的？
經測試不是這個問題，即使 img 標簽閉合，在IE7下圖片顯示仍然有問題。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#test-container
{
width: 300px;
height: 200px;
border: solid 1px #ff0000;
line-height: 200px;
}
#test-container .photo img
{
max-width: 300px;
max-height: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="test-container">
<div class="photo"><img src="http://www.google.com.hk/images/srpr/logo4w.png" alt="Google"/></div>
</div>
</body>
</html>
顯示效果：
