0

I have this very simply CSS code.

body {
    background-color: #08407A;
    min-width: 1000px;
    height: 500px;
}

This one doesn't work in IE at all. The background is fully colored, but I need only background for 500px. I have tried all that background-cover, behavior. But it didn't work out for me.

4

3 回答 3

0

直接合作body不是一个好主意。相反，使用一个元素：

HTML

<body>
    <div id="bg"></div>
    <div id="wrapper">
            HTML DATA
    </div>
</body>

CSS

#bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 500px;
    background-color: #08407A;
}

#wrapper {
    position: relative;
}

检查这个FIDDLE 演示。

于 2013-05-20T16:42:57.810 回答
0

您不应该将主体用作固定宽度的容器。

限制 body 的宽度没有意义，因为它代表了整个浏览器窗口。

相反，请尝试使用块元素，例如 a<div>来实现您的结果。

HTML：

<div class="myDiv">
   This is my content
</div>

CSS：

.myDiv { background-color:#08407A; min-width:1000px; height:500px; }
于 2013-05-20T16:42:59.843 回答
0

它不会那样工作。

您为 body 指定的任何颜色都将显示在页面上。要仅显示 500px 的颜色，您需要添加一个高度为 500px 的 div 并为其提供背景颜色。

但是，如果您不想使用 div 并且使用的是现代浏览器，则可以使用背景样式尝试类似的操作

http://jsfiddle.net/hZfJJ/1/

body {
background: -moz-linear-gradient(top,  rgba(255,61,61,1) 0%, rgba(255,61,61,1) 40%, rgba(255,255,255,1) 40%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,61,61,1)), color-stop(40%,rgba(255,61,61,1)), color-stop(40%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3d3d', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

    background-repeat : no-repeat;
    height:100%;
}

html {
  height: 100%;
}
于 2013-05-20T16:51:48.787 回答