由于更換了新的主題，頁(yè)面正文的寬度從 540px 縮到了 520px，導(dǎo)致原先一些日志中寬度大于 520px 的圖片會(huì)把頁(yè)面撐破，側(cè)邊欄掉到正文底下去，頁(yè)面布局亂得不堪入目。因此，需要讓這些超過(guò)限制寬度的圖片自動(dòng)縮小以適應(yīng)當(dāng)前頁(yè)面，我摸索了一些方法，寫(xiě)出來(lái)拋拋磚。
Firefox 的解決辦法
只需要修改 CSS 樣式表的一行代碼，給正文中的 img 加上 max-width 屬性：
max-width 屬性會(huì)自動(dòng)將正文中超過(guò)限寬的圖片成比例地縮小到 520px 寬度，方便快捷，在 Firefox 2 瀏覽器中測(cè)試通過(guò)。我沒(méi)有 Opera、Safari，但它們應(yīng)該是支持 max-width 屬性的，聽(tīng)說(shuō) IE7 （可能）也支持該屬性，反正 IE6 是不行的，所以還得為 IE6 想專(zhuān)門(mén)的辦法。
IE6 的解決辦法
1. 使用帶有表達(dá)式的 CSS 樣式
這個(gè)方法看上去似乎是可以的，但我在測(cè)試時(shí)發(fā)現(xiàn)，寬度超過(guò) 520px 的圖片的確已經(jīng)縮小，但是后面出現(xiàn)的小圖片的寬度被放大到了 520px。我認(rèn)為可能是頁(yè)面中一旦有圖片寬度超過(guò) 520px，width 屬性的值就會(huì)固定為 520px，導(dǎo)致出現(xiàn)剛才說(shuō)的問(wèn)題。這個(gè)方法出自這里，大家研究一下，看是不是我用錯(cuò)了。
2. 使用 JavaScript 調(diào)整
其實(shí)最初我就想到 JavaScript，但腳本只能在頁(yè)面裝載完成之后執(zhí)行，網(wǎng)絡(luò)狀況不太好的話，需要加載很長(zhǎng)一段時(shí)間才能輪到腳本執(zhí)行，用戶體驗(yàn)較差；另外，如果用戶關(guān)閉了瀏覽器的 JavaScript 支持，這個(gè)方法也就失效了。
<script type="text/javascript">
window.onload = function() {
for (var index = 0; index <document.images.length; index++) {
var maxWidth = 520;
if (document.images[index].width> maxWidth) {
document.images[index].width = maxWidth;
}
}
}
</script>
<![endif]-->
總結(jié)
一句話，希望 IE6 早日被淘汰！
