欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間：2016-01-13 12:05:09   作者：佚名   我要評(píng)論
這篇文章主要介紹了兼容IE6、IE7的min-width、max-width寫(xiě)法,需要的朋友可以參考下

很多時(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）

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


復(fù)制代碼
代碼如下:

.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，效果達(dá)到了。
至此，你是不是認(rèn)為問(wèn)題都解決了？
年輕人，圖樣圖森破啊，IE豈是你能輕易解決的
讓我們來(lái)看看還有什么問(wèn)題吧，這次我們用在按鈕上看看效果如何：


復(fù)制代碼
代碼如下:

<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通過(guò)了，但是換IE7來(lái)折磨你了（真的是折磨啊，說(shuō)多了都是淚。）

Why？

好像是因?yàn)镮E7這時(shí)把min-width當(dāng)成width設(shè)置了，解決方案還是hack：


復(fù)制代碼
代碼如下:

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

謝天謝地！終于可以了，開(kāi)香檳慶?？?！

Wait，年輕人，都說(shuō)你太年輕了，還不信

如果我不提醒你，哪天死了你都不知道怎么死的

這次我們使用JS來(lái)動(dòng)態(tài)改變控件的內(nèi)容，看看控件的寬度是否會(huì)隨之改變


復(fù)制代碼
代碼如下:

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


復(fù)制代碼
代碼如下:

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攜手一起來(lái)折磨你了

抓狂了，裸奔去，下回再分解

相關(guān)文章

最新評(píng)論