兼容IE6、IE7的min-width、max-width寫(xiě)法

2024-07-11 08:29:36

字體：大中小

供稿：網(wǎng)友

很多時(shí)候，我們會(huì)想要設(shè)置容器的最小寬度或最大寬度，但I(xiàn)E6不支持min-width、max-width屬性怎么辦？
別著急，跟著我慢慢來(lái)，會(huì)讓你捉急的還很多呢
首先我們來(lái)看看標(biāo)準(zhǔn)屬性min-width、max-width效果如何：

復(fù)制代碼

代碼如下:
.ie-hack {
min-width: 100px;
max-width: 200px;
}

復(fù)制代碼

代碼如下:
<div class="ie-hack">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL</div>
<div class="ie-hack">s</div>

（圖1-1 正常瀏覽器）

（圖1-2 IE6）

咦，好像不是預(yù)期的結(jié)果

哦，原來(lái)是block的原因。那我們改用inline-block吧：

復(fù)制代碼

代碼如下:
.ie-hack {
min-width: 100px;
max-width: 200px;
display: inline-block;
}

復(fù)制代碼

代碼如下:
<span class="ie-hack">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL</span>

<span class="ie-hack">s</span>

（圖2-1 正常瀏覽器）

（圖2-2 IE6）

哦啦，正常瀏覽器的寬度限制實(shí)現(xiàn)了，那現(xiàn)在我們來(lái)解決IE6的問(wèn)題
這里用只有IE6才識(shí)別的_width屬性，同時(shí)使用expression表達(dá)式來(lái)動(dòng)態(tài)設(shè)置屬性值：

復(fù)制代碼

代碼如下:
.ie-hack {
min-width: 100px;
max-width: 200px;
display: inline-block;
_width: expression(this.offsetWidth < 100 ? '100px' : (this.offsetWidth < 200 ? 'auto' : '200px'));
}

刷新頁(yè)面看看吧

哈哈，恭喜你被坑了，IE6卡死了
別問(wèn)我，我也不知道原因，不過(guò)我知道解決方法，就是把第一個(gè)小于號(hào)改為大于號(hào)：

復(fù)制代碼

代碼如下:_width: expression(this.offsetWidth > 100 ? (this.offsetWidth < 200 ? 'auto' : '200px') : '100px');

好了，這次不會(huì)卡死了，那我們看看效果怎么樣：

（圖3 IE6）