兼容IE6、IE7的min-width、max-width寫法
很多時候，我們會想要設置容器的最小寬度或最大寬度 ， 但IE6不支持min-width、max-width屬性怎么辦?
別著急，跟著我慢慢來，會讓你捉急的還很多呢
首先我們來看看標準屬性min-width、max-width效果如何：
復制代碼代碼如下:
.ie-hack {
min-width: 100px;
max-width: 200px;
}
復制代碼代碼如下:
div class="ie-hack"LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL/div
div class="ie-hack"s/div
(圖1-1 正常瀏覽器)
(圖1-2 IE6)
咦，好像不是預期的結果
哦，原來是block的原因 。那我們改用inline-block吧：
復制代碼代碼如下:
.ie-hack {
min-width: 100px;
max-width: 200px;
display: inline-block;
}
復制代碼代碼如下:
span class="ie-hack"LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL/span
span class="ie-hack"s/span
(圖2-1 正常瀏覽器)
(圖2-2 IE6)
哦啦，正常瀏覽器的寬度限制實現了，那現在我們來解決IE6的問題
這里用只有IE6才識別的_width屬性，同時使用expression表達式來動態設置屬性值：
復制代碼代碼如下:
.ie-hack {
min-width: 100px;
max-width: 200px;
display: inline-block;
_width: expression(this.offsetWidth 100 ? '100px' : (this.offsetWidth 200 ? 'auto' : '200px'));
}
刷新頁面看看吧
哈哈 ， 恭喜你被坑了，IE6卡死了
別問我 ， 我也不知道原因，不過我知道解決方法，就是把第一個小于號改為大于號：
復制代碼代碼如下:_width: expression(this.offsetWidth 100 ? (this.offsetWidth 200 ? 'auto' : '200px') : '100px');
好了 ， 這次不會卡死了，那我們看看效果怎么樣：
(圖3 IE6)
最小寬度有了，但最大寬度沒限制住 。
這是因為內容太多，自動拉伸了，畢竟不是max-width啊
那我們把超出的內容截掉看看：
復制代碼代碼如下:
.ie-hack {
min-width: 100px;
max-width: 200px;
display: inline-block;
_width: expression(this.offsetWidth 100 ? (this.offsetWidth 200 ? 'auto' : '200px') : '100px');
overflow: hidden;
}
(圖4 IE6)
OK，效果達到了 。
至此，你是不是認為問題都解決了?
年輕人，圖樣圖森破啊 ， IE豈是你能輕易解決的
讓我們來看看還有什么問題吧，這次我們用在按鈕上看看效果如何：
復制代碼代碼如下:
input class="ie-hack" type="button" value="https://www.questions.com.cn/dnjc/LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL" /
input class="ie-hack" type="button" value="https://www.questions.com.cn/dnjc/s" /
(圖5-1 正常瀏覽器 IE6)
(圖5-2 IE7)
Oh, no!這次IE6通過了 ， 但是換IE7來折磨你了(真的是折磨啊，說多了都是淚 。)
Why?
好像是因為IE7這時把min-width當成width設置了，解決方案還是hack：
復制代碼代碼如下:
.ie-hack {
min-width: 100px;
max-width: 200px;
* min-width: auto;
* width: expression(this.offsetWidth 100 ? (this.offsetWidth 200 ? 'auto' : '200px') : '100px');
_width: expression(this.offsetWidth 100 ? (this.offsetWidth 200 ? 'auto' : '200px') : '100px');
overflow: hidden;
}
(圖7 IE7)
謝天謝地!終于可以了，開香檳慶?？?
Wait，年輕人 ， 都說你太年輕了，還不信
如果我不提醒你，哪天死了你都不知道怎么死的
這次我們使用JS來動態改變控件的內容 ， 看看控件的寬度是否會隨之改變
復制代碼代碼如下:
span class="ie-hack" id="span1"LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL/span
span class="ie-hack" id="span2"s/span
input class="ie-hack" id="btn1" type="button" value="https://www.questions.com.cn/dnjc/LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL" /
input class="ie-hack" id="btn2" type="button" value="https://www.questions.com.cn/dnjc/s" /
復制代碼代碼如下:
window.onload = function() {
document.getElementById("span1").innerHTML = "s";
document.getElementById("span2").innerHTML = "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL";
document.getElementById("btn1").value = "https://www.questions.com.cn/dnjc/s";
document.getElementById("btn2").value = "https://www.questions.com.cn/dnjc/LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL";
};
(圖8-1 正常瀏覽器)
(圖8-2 IE6 IE7)
【兼容IE6、IE7的min-width、max-width寫法】我們想到的效果應該是圖8-1那樣的，但這次IE6和IE7攜手一起來折磨你了
