时间:2021-05-25
今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如
复制代码 代码如下:
if($.browser.msie && $.browser.version == 6.0)
{
var maxWidth = parseInt($('.viewBigPic img').css('max-width'));
$('.viewBigPic img').each(function(){
if ($(this).width() > maxWidth)
$(this).width(maxWidth);
});
}
不知道是什么原因,获取不到css里面的最大值,然后只能用原生的js来实现
js代码如下:
复制代码 代码如下:
<script type='text/javascript'>
function setPhotoSize(elem, width, height) {
<!--[if IE 6]>
try{
var image=new Image();
image.src=elem.src;
if(image.width>0 && image.height>0){
var rate = (width/image.width < height/image.height)? width/image.width : height/image.height;
if(rate <= 1){
elem.width = image.width*rate;
elem.height = image.height*rate;
}
else {
elem.width = image.width;
elem.height = image.height;
}
}
}catch(e){}
<!--[endif]-->
}
</script>
部分的html代码如下:
复制代码 代码如下:
<div class="viewBigBox">
<div class="viewBigPic">
<p><img id="imgid" onload="setPhotoSize(this,730,470)" src="images/viewShow.jpg" alt=""/></p>
</div>
</div>
css样式如下:
复制代码 代码如下:
.viewBigBox{ border:1px solid #e3e3e3; background-color:#ffffff; padding:1px; margin-top:18px;}
.viewBigPic{ background-color:#f7f7f7;padding:20px 14px;}
.viewBigPic p{display:table-cell;width:730px; line-height:470px; overflow:hidden; vertical-align:middle; text-align:center; height:470px;*font-size:390px;}
//实现图片垂直居中,主要运用了font-size与height的比例
.viewBigPic p img{ vertical-align:middle; max-height:470px; max-width:730px;}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼容IE6,你可以举一
1、IE6支持max-height解决方法IE6支持最大高度解决CSS代码:复制代码代码如下:.yangshi{max-height:1000px;_heigh
1、IE6支持max-width解决方法IE6支持最大宽度,解决CSS代码:复制代码代码如下:.className{max-width:1000px;_widt
上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题jQuery
说明:让IE6及其以下版本支持CSS中min/max-width/height属性复制代码代码如下:@if(@_win32&&@_jscript_version