min-width、max-width兼容IE6、IE7的解决方法

很多时候，我们会想要设置容器的最小宽度或最大宽度，但IE6不支持min-width、max-width属性怎么办？IE7以上虽然支持min-width、max-width，但是容器要设置display才行，如果不需要浮动，IE7又不支持display:inline-block，那又怎么办？

别着急，跟着我慢慢来。

注意：下文所说的正常浏览器指火狐浏览器，因为我只在火狐测试的，其他正常主流浏览器效果一样。

首先我们来看看标准情况下min-width、max-width属性是什么效果。

    <div class="box1">【1号】</div><div class="box2">【2号】</div><div class="box3">【3号】 <a href="http://blog.csdn.net/xjun0812?viewmode=list">http://blog.csdn.net/xjun0812?viewmode=list</a><p>欢迎关注我的博客欢迎关注我的博客欢迎关注我的博客欢迎关注我的博客</p></div>

1号容器是固定宽度，作为参考；

2号容器是为后面设置最小宽度做准备；

3号容器是为后面设置最大宽度做准备；

为了容易看出效果，我们简单设置一下样式：

    .box1{width: 400px;height: 45px;background-color: #90d3d1;}.box2{min-width: 400px;height: 45px;background-color: #51ee6c;}.box3{max-width: 400px;height: 45px;background-color: #2788ee;}

正常浏览器显示效果如下：

我们看到3号容器的内容已经溢出，说明最大宽度已实现。2号容器内容少，但是并没有像我们想象的显示400px宽度，而是填充了屏幕。哦，原来是block的原因，那我们对容器2设置inline-block在看效果吧。

   .box2{display: inline-block;min-width: 400px;height: 45px;background-color: #51ee6c;}

现在正常浏览器显示效果如下：

我们来看看浏览器IE7的效果

很明显IE7并没有实现min-width效果，是因为IE6、ie7不兼容display:inline-block。这里解决方法有2种，第一是写个方法兼容display:inline-block，如果想让容器浮动可以用此方法；第二是用css hack+ expression。我这里用第二种方法吧，以IE7为例：

   .box2{display: inline-block;min-width: 400px;height: 45px;background-color: #51ee6c;*min-width: auto;*width: expression(this.offsetWidth < 400 ? 'auto' : '400px');}

来看浏览器IE7现在的效果

OK，现在正常浏览器和IE7浏览器效果都达到了，如果考虑流氓IE6的朋友也是用这个方法，只是hack不一样而已，我就不在这里赘述了。

那么现在你是不是认为问题都解决了呢？年轻人，不要着急，IE岂是你能轻易解决的。让我们来看看还有什么问题吧，这次我们用在表格上看看效果是什么样子，内容和样式代码如下：

    <table><tr><td class="table1">【1号】表格一</td></tr></table><table><tr><td class="table2">【2号】表格一</td></tr></table><table><tr><td class="table3">【3号】表格一3号表格一3号表格一3号表格一3号表格一</td></tr></table>

    .table1{width: 200px;}.table2{min-width: 200px;}.table3{max-width: 200px;}

正常浏览器显示效果如下：

IE6、IE7浏览器显示效果如下：

IE6、IE7下td不支持min-width和max-width属性。原本我想用上面的css来解决这个问题，结果不行，在网上也找了好多资料，试了还是不行。最后只能用js来解决了，非常简单，具体代码如下：

    if($(".table2").width()<200){$(".table2").width("200px")}if($(".table3").width()>200){$(".table3").width("200px")}

再来看看IE6浏览器，IE7也是一样：

好了，现在常用的情况都解决了，我这里主要是讨论的最小宽度。最大宽度和最小高度等等你可以自己试一下。终于可以休息会了，不过我们随时会遇到兼容性问题，只有经验多了我们才不会担心。

最后，时间仓促，资质有限，文中表述仅代表个人观点，如果有更好的方法，欢迎留言。

min-width、max-width兼容IE6、IE7的解决方法相关推荐

div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题收藏所有浏览器通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...
CSS完美兼容IE6/IE7/FF的通用方法～！！！
http://www.w3pop.com/learn/view/p/2/o/0/doc/css_hack_ie67_ff/ CSS完美兼容IE6/IE7/FF的通用方法作者:w3pop.com 翻译 ...
html4.0.1兼容ie7,CSS 完美兼容IE6/IE7/FF的通用hack方法
CSS 完美兼容IE6/IE7/FF的通用hack方法发布时间:2009-03-20 00:27:16 作者:佚名我要评论一.CSS HACK 以下两种方法几乎能解决现今所有HACK. ...
div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法
简单方法: IE6,IE7,IE8,FF的兼容方法(2) 浏览器兼容代码: 浏览器符号 IE6 IE7 IE8 FF * !important _ \9 *html *+html 说明:代表能识别: ...
html下拉列表兼容性,下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)
复制代码代码如下: 兼容IE6/IE7/IE8/火狐---下拉菜单select样式设置 body {background-color:#6C6;} .select_border{ width:59px ...
[转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips
使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...
html flash 兼容ie7,网页制作常见的面试题（怎样兼容IE6/IE7/火狐浏览器）
1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG 例如: 因为加上浮动后就会多出一倍的边距,浮动后本来 ...
【Airtest】Airtest中swipe方法兼容不同分辨率的解决方法
[Airtest]Airtest中swipe方法兼容不同分辨率的解决方法参考文章: (1)[Airtest]Airtest中swipe方法兼容不同分辨率的解决方法 (2)https://www.cn ...
ie11不兼容java_IE11浏览器网页不兼容的四种解决方法
Edge浏览器已然成为最新win10系统的默认浏览器,但是用户量却远远不及IE11,IE11虽然性能得到了大的改进,但在浏览网页的时候还是会出现一些兼容性的问题,下面小编就讲为大家分享IE 11浏览器 ...
“const wchar_t *“ 类型的实参与 “LPCSTR“ 类型的形参不兼容的原因和解决方法
(133条消息) "const wchar_t *" 类型的实参与 "LPCSTR" 类型的形参不兼容的原因和解决方法_cmiao-me的博客-CSDN博客

min-width、max-width兼容IE6、IE7的解决方法

min-width、max-width兼容IE6、IE7的解决方法相关推荐

最新文章

热门文章