1

我无法删除网站上的滚动条并保留我正在处理的整页背景网站我不想降低图像的高度并在底部留下一个没有背景的小条。如何在 IE8 中实现没有滚动条的整页背景？

<!doctype html>
<html>
<style>
html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 height:100%;
width:100%
}

body{background-size: 100%;}

@font-face
{
font-family: myFirstFont;
src: url(pachs___.ttf);
}

img.stretch {
    width:100%;
    height:100%;}

div.wholepage{width:100%; height:100%;border-style:solid; border-width:0px;padding:0px;}

</style>
<body>

<div class="wholepage">
<img src="images\parchment.png" class="stretch">
</div>

</body>
</html>
4

2 回答 2

1

如果不想要滚动条，可以OVERFLOW: HIDDEN;在body&html中添加，也可以确保body的内容是绝对定位的，从而使body不继承高度。

html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height:100%;
  width:100%
  overflow: hidden;
}

你不能在 IE8 中使用 background-size 因为它不受支持，CSS3PIE支持它，但它仍然是一个 javascript 解决方案，所以我会坚持使用 javascript 的一些简单的东西。

在 css 中，这是我们最初必须做的，这可能只适用于带有过滤器的 IE8，但是可以肯定的是，我会坚持使用 javascript。

    html { 
      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')";
    }

这是一个有效的解决方案。

HTML：

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

JAVASCRIPT：

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg.removeClass().addClass('bgheight');
        } else {
            $bg.removeClass().addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

演示：http: //jsfiddle.net/DUEsh/

在 IE7+ 中工作（可能在 IE6 中使用固定位置 shim）

于 2013-09-05T00:45:10.910 回答
0

如果您不想要滚动条，您可以添加 overflow: hidden; 对身体；

html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height:100%;
  width:100%
  overflow: hidden;
}
于 2013-09-05T00:48:43.500 回答