萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 利用JS解決ie6不支持max-width,max-height問題

利用JS解決ie6不支持max-width,max-height問題

 本篇文章主要介紹了利用JS解決ie6不支持max-width,max-height問題的方法。需要的朋友可以過來參考下,希望對大家有所幫助

今天遇到一個關於用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;}  
copyright © 萬盛學電腦網 all rights reserved