0 
<script type="text/javascript">  
    $(document).ready(function(e){  
       var dheight=$(document).innerHeight();  
       $(".background").css({  
          "height": dheight,  
          "overflow":"hidden"  
       });  
    });  
</script>

<section id="box">
    <section class="heading">
        <div class="head">SiteName</div>
    </section>
    <!--heading-->
    <div class="background">
        <img src="images/hdimage.jpg" width="100%" />
    </div>
    <!--background-->
</section>
<!--box-->

The problem is in the Internet Explorer (even IE 10) <div class="background"> takes the aspect height of the image, even I set height, max-height with overflow: hidden.

In Google Chrome, Firefox there is no problem. On inspecting in IE I find IE adds inline style with height of the image to the <div>. How to resolve this issue?

4

2 回答 2

0

在我看来，这些线是不可预测的

$(document).ready(function(e){  
       var dheight=$(document).innerHeight();

当您处理图像时，因为它们的高度尚不可用，您应该等待它们加载。

$(window).on('load',fumction(){
   var dheight=$(document).innerHeight();
   ...
})

是更好的选择

于 2013-03-20T10:49:11.447 回答
0

我猜你试图实现全屏背景，如果你是你的代码还远未完成并在所有实例和浏览器中工作。

我认为由于您的 img 上缺少结束标签，您的代码可能无法正常工作/>

我建议你看看这篇文章中找到的以下代码

.background{

         background: url(images/bg.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

}
于 2013-03-20T10:46:28.507 回答