Question

<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-->

问题在于Internet Explorer（即使是IE 10）<div class="background">获取图像的高宽比，即使我将height，max-height设置为overflow: hidden。< / p>

在谷歌浏览器中，Firefox没有问题。在IE中进行检查时，我发现IE将图像高度的内联样式添加到<div>。如何解决这个问题？

Answer 1

我猜你试图实现全屏幕背景，如果你的代码远非完整并且在所有实例和浏览器中都有效。

我认为您的代码可能无效，原因是您的img />上缺少结束标记

我建议您查看this article

上的以下代码

.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')";

}

Answer 2

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

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

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

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

是更好的选择

DIV高度取内部img的高度而不是使用CSS设置的高度

2 个答案: