您现在的位置是:网站首页> 编程资料编程资料
让IE6支持兼容min-width、max-width CSS样式属性的方法浅谈前端制作中,IE6还有必要兼容吗使用语义化标签去写你的HTML 兼容IE6,7,8兼容IE6、IE7的min-width、max-width写法一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10Css样式兼容IE6,IE7,FIREFOX的浏览器的写法示例介绍兼容IE6的min-width、min-height的简单方法
2021-09-05
728人已围观
简介 这篇文章主要介绍了让IE6支持兼容min-width、max-width CSS样式属性的方法,需要的朋友可以参考下
我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定宽度范围值,有时需要设置一个最小宽度,接下来由DIVCSS5为大家总结的解决IE6不支持min-width和不支持max-width的方法。以下为CSS 宽度之IE6支持最小宽度、最大宽度解决技巧(你可能需要进一步详细了解CSS width知识)。
1、IE6支持max-width解决方法
IE6支持最大宽度,解决CSS代码:
.yangshi{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;}
说明:max-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;则是让IE6支持max-width替代CSS代码,但效果和其它版本浏览器相同效果。
让所有浏览器都支持max-width的CSS样式代码,完整:
max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden; 这里的1000和1000px是你需
要的数值,注意3个数值的相同。
设置最大max-width的时候别忘记加上overflow:hidden;
2、IE6支持min-width解决方法
IE6支持最小宽度,解决CSS代码:
.yangshi{min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");}
说明:min-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");则是让IE6支持min-width替代CSS代码,但效果和其它版本浏览器相同效果。
让所有浏览器都支持min-width的CSS样式代码,完整:
min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");
这里的1000和1000px是你需要的数值,注意3个数值的相同。
3、让IE6支持min-width同时又支持max-width解决方法
让IE6即支持最小宽度又支持最大宽度限制设置。这种情况我们常常碰到对图片控制,让不确定大小的图片,如果太宽,不能超出一定范围值,小的时候不控制他的方法,用到CSS代码:
_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));
对图片控制CSS完整代码:
img{max-width:620px;_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));}
这里说明:图片不能超出大于620px的宽度,又不小于1像素的宽度。
让所有浏览器包括IE6浏览器支持最大宽度又支持最小宽度DIV CSS代码:
.yangshi{max-width:620px;min-width:1px;_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));}
相关内容
- 兼容IE6、IE7的min-width、max-width写法浅谈前端制作中,IE6还有必要兼容吗使用语义化标签去写你的HTML 兼容IE6,7,8让IE6支持兼容min-width、max-width CSS样式属性的方法一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10Css样式兼容IE6,IE7,FIREFOX的浏览器的写法示例介绍兼容IE6的min-width、min-height的简单方法
- 基于CSS3制作立体效果导航菜单CSS3实现的3D立体文字时钟效果源码CSS3实现的鼠标经过立体翻转切换特效源码CSS实现有立体感的横向按钮式菜单效果代码一款纯css3实现的3D立体翻转导航特效源码基于HTML5+CSS3实现鼠标悬停3D立体式图片效果源码html5+css3实现的会翻动的3D立体图书效果源码纯css实现立体摆放图片效果的实例代码
- CSS常用技巧之CSS书写技巧和CSS HACK技巧 10个必备的CSS技巧总结要知道的10个CSS技巧最常用和实用的CSS技巧 21个神奇的CSS技巧网页制作中应用的50个CSS技巧(国外)CSS技巧:IE6用import导入CSS的问题书写CSS的5个小技巧让你的样式更规范CSS Hack技术介绍及常用的Hack技巧集锦CSS hack技巧之IE6,IE7,firefox显示不同效果IE6、IE7和FF的最简单的hack技巧-CSS教程-网页制作-网页教学网
- CSS实现微信扫码特效 滴滴打车出租车微信扫码支付立减车费送红包微信扫码关注诸葛理财 100%得1~5元微信现金红包 秒到账微信扫码注册简理财 秒提现2.19元 累计收益15.33元(亲测提现)微信扫码关注搜狐视频公众号活动 最高领28天去广告会员扫红码抢红包 应用宝微信扫码下载百分百得红包微信扫码安装快乐赚 100%免费领取微信现金红包(仅安卓手机)
- div层调整z-index属性无效原因分析及解决方法css3的transform造成z-index无效解决方案div层调整z-index属性在IE中无效原因分析及解决方法ActiveX插件的Z-Index属性无效问题解决IE6 select z-index无效,遮挡div bug的解决方法
- css display inline block 兼容性问题写法css之display属性之inline-block布局实现详解详解css中inline-block的最小宽度值详解CSS 去掉inline-block元素间隙的几种方法 css几种解决inline-block间隙的方案(整理)详解CSS中的display:flex||inline-flex属性css解决display:inline-block;产生的缝隙(间隙)的方法css中转换为行内样式的解决方案(css-inline)
- 细说CSS中margin属性的使用 浅谈css margin重叠CSS 之margin知识点(必看)css布局之负margin妙用及其他实现CSS的margin属性在页面布局中的使用攻略深入解析CSS中margin属性的使用CSS中使用负margin值来调整居中位置CSS属性探秘系列(六):margin解决margin 外边距合并问题
- 基于html和CSS3制作简单侧边导航栏使用HTML+Css+transform实现3D导航栏的示例代码html+css+js实现导航栏滚动渐变效果Html5导航栏吸顶方案原理与对比实现html5 横向滑动导航栏的方法示例html+css 实现简易导航栏功能基于html和CSS3制作酷炫的导航栏使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
- 非常漂亮的CSS3百叶窗焦点图动画纯CSS实现图片百叶窗展示效果示例
- 全面总结CSS代码的编写规范及优化建议CSS代码书写规范究极指南编写灵活、稳定、高质量的HTML和css代码规范指南css代码缩写 div+css布局代码简写规范19楼论坛的前端CSS代码规范介绍让样式表CSS代码更加专业规范闭合浮动元素让CSS代码更规范-CSS教程-网页制作-网页教学网分享20条编写 CSS 代码的建议