兼容IE6或IE7的min-width和max-width寫法有哪些

今天就跟大家聊聊有關(guān)兼容IE6或IE7的min-width和max-width寫法有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為武川企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，武川網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

很多時候，我們會想要設(shè)置容器的最小寬度或最大寬度，但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）

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

哦，原來是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）

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

代碼如下:

.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）

最小寬度有了，但最大寬度沒限制住。
這是因為內(nèi)容太多，自動拉伸了，畢竟不是max-width啊
那我們把超出的內(nèi)容截掉看看：

代碼如下:

.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="LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL" />

<input class="ie-hack" type="button" value="s" />

（圖5-1  正常瀏覽器 & IE6）

（圖5-2  IE7）

Oh, no！這次IE6通過了，但是換IE7來折磨你了（真的是折磨啊，說多了都是淚。）

Why？

好像是因為IE7這時把min-width當成width設(shè)置了，解決方案還是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來動態(tài)改變控件的內(nèi)容，看看控件的寬度是否會隨之改變

代碼如下:

<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="LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL" />

<input class="ie-hack" id="btn2" type="button" value="s" />

代碼如下:

window.onload = function() {
   document.getElementById("span1").innerHTML = "s";
   document.getElementById("span2").innerHTML = "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL";
   document.getElementById("btn1").value = "s";
   document.getElementById("btn2").value = "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL";
};

（圖8-1  正常瀏覽器）

（圖8-2  IE6 & IE7）

我們想到的效果應(yīng)該是圖8-1那樣的，但這次IE6和IE7攜手一起來折磨你了

看完上述內(nèi)容，你們對兼容IE6或IE7的min-width和max-width寫法有哪些有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站欄目：兼容IE6或IE7的min-width和max-width寫法有哪些
瀏覽路徑：http://bm7419.com/article14/gigpde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站改版、商城網(wǎng)站、建站公司、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)