许多情况下,大家会要想设定器皿的最少宽度或最大宽度,但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起来折磨你了
抓狂了,裸奔去,下次再溶解