最近解决的有意思的一个小问题

以前做的一个网站，在IE6.0+下都显示正常

但是在FF下中间的滚动图片有时会出现很奇怪的问题，缩成一个小点，

而在谷歌CHROME下就更夸张了，直接就是一个小点，

刚开始以为是 缓存的问题，但经过测试，感觉应该不是，请教各位大侠，跪谢！

http://alu.snnu.edu.cn/index.aspx

详细讨论见：http://topic.csdn.net/u/20100518/15/c128a120-ea31-44c0-b5ae-ec43e8312467.html?seed=699411367&r=65523627#r_65523627

PS：看来还是得按YAHOO前端工程师说的那样，尽量不要让浏览器自己去判断图片大小。。。

附相关资料http://www.w3school.com.cn/tags/att_img_height-width.asp：

HTML <img> 标签

定义和用法

<img> 标签的 height 和 width 属性可以设置图像的尺寸。

提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。

提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。

 

为什么要使用 height 和 width 属性

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。

对于创作者来说，一种更为有效的方法是通过 <img> 标签的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在 <img> 标签中出现的次序并不重要。