1

我正在开发一个允许我为首页插入一些自定义 CSS 的 Web 应用程序。

我想在起始页有一个全屏背景图像。我知道我可以使用所有最新版本的浏览器都支持的background-size:cover 。

                body {
                    background-image:url(/File/Publisher/Start/startpage_background.jpg);
                    background-repeat:no-repeat;
                    background-size:cover;
                }

这适用于最新版本的 Firefox 和 Chrome。但是，它在 IE11 中不起作用。背景图像不会缩小以覆盖整个屏幕。它以其原始大小显示并被部分裁剪。

使用 F12 进行调试，我发现如果我禁用 margin-top 或 margin-bottom（见截图）， background-size 属性将起作用。

在此处输入图像描述

我不想修改 web 应用程序的原始 CSS 引入的 margin 属性。有什么办法可以解决这个问题？

4

1 回答 1

2

我也遇到过这个问题，发现body只要不设置为百分比，给出任何高度都会使封面属性生效。为了良好的秩序，min-height: 100vh应该这样做：

http://codepen.io/anon/pen/oXmzLL?editors=010

很奇怪，因为在任何其他浏览器上都没有问题，但那是 IE。当然，它仅在内容不超过窗口大小时才存在（编辑 - 它也不应该具有将其从文档流中取出的定位）。

顺便说一句，这不是最快的答案，但这是我在这个主题上遇到的唯一主题（与旧版浏览器支持无关）......

于 2015-08-05T05:21:52.947 回答