声明内容：本站所有文章均为原创或整理原创，您可以进行转载，但请注明出处给予链接，并且不得删除文章中标识的引用出处，谢谢，让我们创建良好的互联网氛围。
做RC4.0皮肤的时候因为原有的脚本突然失效，对于脚本不太好的我来讲，搞了很久也没有解决问题，不能使用特效还是小事，麻烦的是，日志中的图片一旦超过了层的尺寸就会溢出，用overflow的属性来定义，又不太好，毕竟是机械的裁切隐藏掉了，并非按比例显示出来，后来努力在网上搜索了一些方法，发现一种比较好用的，一来做个记录，而来帮助需要的朋友。以下举个例子先：
例如：
- <style type="text/css">
- <!--
- #text {
- width:630px;
- float:left;
- }
- -->
- </style>
- </head>
- <body>
- <div id="text">
- <p><img alt="" src="/Attach/Matter/200906/633796660246438250_1.jpg" /></p>
- </text>
- </body>
- </html>
像以上情况的话，图片一旦超过了630PX，要么图片浮出层，要么把层撑变形，我们更不能死板的要求用户完全按照你限定的尺寸上传图片，这样就需要对显示随机图片的区域进行定义，以往的解决方法就是加入脚本，配合CSS来限制图片的尺寸，但是对于纯粹的美工来讲，多少麻烦一些。那就自然用到CSS了。如果用OVERFLOW来定义溢出的话，图片也是仅仅被切割隐藏了，效果不佳。在网上搜索后得到一个方法，就是样式中加入以下代码：
- max-width:630px; width:expression(document.body.clientWidth > 630? "630px": "auto" );
可是加了之后却发现一个问题，网页中的所有图片都被拉成了630px；惨不忍睹啊，但后来一想既然可以判别大于，应该也可以判别小于，所以更改代码如下：
- <style type="text/css">
- <!--
- #text {
- width:630px;
- float:left;
- }
- #text img {
- max-width:600px;
- width:expression(document.body.clientWidth > 600? "600px": "auto");
- width:expression(document.body.clientWidth < 600? "auto": "auto");
- }
- -->
- </style>
- </head>
- <body>
- <div id="text">
- <p><img alt="" src="/Attach/Matter/200906/633796660246438250_1.jpg" /></p>
- </text>
- </body>
- </html>
这样一来，样式表告诉浏览器，图片的最大尺寸不要超过600px,如果超过了，那么最大宽度为600，高度自动，如果小于600，那么高度和宽度全部自动，也就是按照原有尺寸来显示了。问题解决了。
根据这些东西，衍生了解一些东西，IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 给元素固有属性赋值 例如，你可以依照浏览器的大小来安置一个元素的位置。
- #myDiv {
- position: absolute;
- width: 100px;
- height: 100px;
- left: expression(document.body.offsetWidth - 110 + "px");
- top: expression(document.body.offsetHeight - 110 + "px");
- background: red;
- }
这里只是举了一个例子，某些时候，这样的做法可以解决不少问题，当然还是需要有一点JS的支持，起码方法属性要有所了解才行。当然了，话又说了回来，毕竟是脚本的东西，所以能够通过其他手段解决的时候，尽量不要使用expression，会占用客户端很多的资源。
