IE6下图像的最大宽度

Vidar Liu — Sun, 27 Dec 2009 09:10:01 +0000

图像如果显示在一个限制了宽度的div容器中时，图像有多大，它便会显示多大,当布局小于图像大小时便会产生溢出。同样的问题在table容器中一样。

那么你会说可以在CSS中定义布局中图像的宽度。那么如果图像小于布局的宽度时，图像便会被拉伸变形。那么有什么好的办法让这个图像即不会溢出，又能保持它原来的大小呢？这个时候我们可以用CSS的max-width方法来限制图像的最大宽度解决这个问题，具体用法就是:

.layout{width:600px;}
.layout img{max-width:600px;height:auto;}/*如果不希望图片会因为限制宽度而变形的话，那么把高度设置为自适应*/

如此，问题解决，但是并不是所有问题都解决了，浏览器兼容性是永远都是前段工程师的噩梦，因为该死的IE6并不对这个属性提供支持。所以我们不得不针对IE6做一些处理。接下来就是只有IE支持的属性值：expression

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

用法是expression(statement),例如我们上面的CSS，我们需要在规则中加入

.layout{width:600px;}
.layout img{max-width:600px;width:expression(this.width > 600 ? 600: true);height:auto;}/*this是指当前元素‘.’操作符中文代表中文意义的‘的’,width字面翻译宽度，后面是三元判断表达式，意思是说当img的宽度大于600时，img的宽等于600，否则不进行任何操作*/

也谈IE6下block元素float多出文字BUG

Vidar Liu — Tue, 01 Dec 2009 06:28:17 +0000

最近做的一个项目经常会用到块级元素（block）浮动定位（float）的方式做的一个类似于BBS文章列表多行多列的布局方案。

我大概看了一下网上对于此种布局的布局办法，发现大多都是用表格来做的。连豆瓣、discuz的论坛也都是表格布局。

但是我对表格的布局有种敬而远之的畏惧感，一个是它的代码量很大，虽然用DW里添加表格的工具很快的添加，但是对于它的自适应元素的问题，我始终难以控制的行云流水。因此，我还是决定用css来做。

我选择用ul元素做列表框架，li元素做列表行，span元素做各列的容器的布局方式实现。

【css部分】

@charset "utf-8";
/* CSS Document */
ul li{margin:0; padding:0; list-style:none; font-size:12px; color:#333}/*初始化ul,li元素，让我们更方便使用*/
ul li{width:800px; height:35px; line-height:35px; border-bottom:1px dashed #ccc}/*定义高35像素的li元素，宽是布局的宽，还定义了一个虚线的下边框*/
ul li span{display:block; float:left; height:35px; line-height:35px;}/*定义span元素为块级元素，左浮动，高为li元素的高*/
 
/*分别定义需要的列span元素的宽度*/
ul li span.listOne{width:300px;}
ul li span.listTwo{width:200px;}
ul li span.listThr{width:100px;}
ul li span.listFou{width:100px;}
ul li span.listFiv{width:100px;}

【html部分】

 
 
 
 
 
 

 
	
帖子列表
帖子分类
发布者
最后回复
发布时间
 
 
	
这里是帖子标题
这里是帖子分类
发布者姓名
回复者姓名
2009-10-10 20：10

这样，如果在IE6+浏览器看的话，会是预想的两行5列的效果，没有任何问题。但是，如果在IE6下看，右侧会多出最后一列中的末字到下一行，如图所示

代码是没有任何问题的，因为在其他浏览器没有任何问题。所以那肯定是IE6的问题。

以前没有用过此种布局，因此并没有过处理此问题的经验。后来去往上搜了一下，往上大多都是出自同门师傅的答案，内容如下：

“1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决”

另外有一篇很详细的解说，但是他是通过宽度的调整解决的我没有尝试，有兴趣的可以试一下，奉上地址如下：
《IE6/IE7文字溢出bug原因及解决办法》http://www.yarak.net.cn/default.asp?id=82
后来问了一下同事，他对此问题有过相应经验，不过他所知道的答案也是网上流传的方式。但是我的代码里并没有注释和以上类似的任何条件。
后经尝试，得出以下方案：
1、在span的父元素上定义溢出隐藏overflow：hidden;可以解决此问题。
2、span元素在html中书写时不进行换行（块级元素的特性）
3、span元素去掉浮动（float）并把显示方式改成display：inline-block
如此，溢出BUG问题解决

Pivot Code » 溢出

IE6下图像的最大宽度

相关日志

也谈IE6下block元素float多出文字BUG

【css部分】

【html部分】

相关日志