时间:2021-05-08
图片设置max-width会使图片消失,当然,是要满足一定的条件的,日常工作中,可能用到的不多,但也应该引起前端攻城师们的注意力。
首先来看一下,应该满足的条件:
1.图片通过css设置了max-width:100%
2.图片设置了width属性,且不等于auto的值,或者css中设置了width,且不等于auto。
3.图片的父级元素设置了float,且没有设置宽度
如果满足以上条件,在IE8(标准模式)中,图片宽度为0,不会在浏览器中显示。请看demo1和demo2。
其它浏览器中显示效果如下:
修复办法:
1.给父级浮动元素设置不为auto的宽度。
2.去掉image元素的width属性。
3.在image元素没有width属性的情况下,设置样式width为auto。
4.去掉max-width样式。
修复的demo就不做演示了,修修上面的demo直接看效果吧。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在IE8中经常遇到的问题就是max-width,网页中图片的尺寸可能比较宽,我会给它设置max-width:100%来限制其宽度最大为父容器的宽度,但是有时
以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼容IE6,你可以举一
在table中设置min-width和max-width属性12table{min-width:60%;min-width:100%;}但是chrome不兼容m
说明:让IE6及其以下版本支持CSS中min/max-width/height属性复制代码代码如下:@if(@_win32&&@_jscript_version
Css防止图片尺寸过大 添加如下CSS: 代码如下img{max-width:800px;height:auto;} 代码中的max-width: