巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

兼容IE6、IE7的min-width、max-width写法

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-21 17:24:57 阅读数: 115

良多时辰,咱们会想要设置容器的最小宽度或最大宽度,但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="LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL" />

<input class="ie-hack" type="button" value="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="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)

咱们想到的成果应当是图8-1那样的,但此次IE6和IE7联袂一路来熬煎你了

抓狂了,裸奔去,下回再分化

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

04
04月
四家公司消息现严重利空

简介:顺丰控股多名股东拟算计减持不超7.7282%股分顺丰控股通知布告,公司股东嘉强顺风、元禾顺风、顺达丰润及监事刘冀鲁打算自2018年8月29... >>概况

17
05月
提提提随意花,付出宝收费进步提现额度最高5.

window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":... >>概况

13
05月
SEO教程之阐发研讨同业4大手艺_巅云建站

一、以访客的身份去拜候合作敌手网站,周全领会网站信息 (1)对领会合作敌手网站信息,听起来也许有点苍茫广泛,可是咱们细细的滤清思惟以后并... >>概况

29
04月
php获得参数的几种体例总结

php获得参数的几种体例总结$value = $_POST["value"];//获得post中的 $value=$_REQUEST["va... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站