适配IE6、IE7的min

日期:2021-01-20 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

许多情况下,大家会要想设定器皿的最少宽度或最大宽度,但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⑵  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⑴  一切正常访问器)


(图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卡死了
别问我,我也不知道道缘故,但是我了解处理方式,便是把第1个小于号改成超过号:

拷贝编码
编码以下:
_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="LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL" />

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



(图5⑴  一切正常访问器 & IE6)


(图5⑵  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="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⑴  一切正常访问器)


(图8⑵  IE6 & IE7)

大家想起的实际效果应当是图8⑴那样的,但这次IE6和IE7携手并肩1起来折磨你了

抓狂了,裸奔去,下次再溶解