由于更换了新的主题，页面正文的宽度从 540px 缩到了 520px，导致原先一些日志中宽度大于 520px 的图片会把页面撑破，侧边栏掉到正文底下去，页面布局乱得不堪入目。因此，需要让这些超过限制宽度的图片自动缩小以适应当前页面，我摸索了一些方法，写出来抛抛砖。
Firefox 的解决办法
只需要修改 CSS 样式表的一行代码，给正文中的 img 加上 max-width 属性：
#content img{max-width:520px;}
max-width 属性会自动将正文中超过限宽的图片成比例地缩小到 520px 宽度，方便快捷，在 Firefox 2 浏览器中测试通过。我没有 Opera、Safari，但它们应该是支持 max-width 属性的，听说 IE7 （可能）也支持该属性，反正 IE6 是不行的，所以还得为 IE6 想专门的办法。
IE6 的解决办法
1. 使用带有表达式的 CSS 样式
#content img{max-width:520px;width:expression(document.body.clientWidth> 520? "520px": "auto" );}
这个方法看上去似乎是可以的，但我在测试时发现，宽度超过 520px 的图片的确已经缩小，但是后面出现的小图片的宽度被放大到了 520px。我认为可能是页面中一旦有图片宽度超过 520px，width 属性的值就会固定为 520px，导致出现刚才说的问题。这个方法出自这里，大家研究一下，看是不是我用错了。
2. 使用 JavaScript 调整
其实最初我就想到 JavaScript，但脚本只能在页面装载完成之后执行，网络状况不太好的话，需要加载很长一段时间才能轮到脚本执行，用户体验较差；另外，如果用户关闭了浏览器的 JavaScript 支持，这个方法也就失效了。
<!--[if IE 6]>
<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]-->
<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]-->
总结
一句话，希望 IE6 早日被淘汰！
