在 IE10 中，我试图创建一个 css 线性渐变，从页面顶部到页面底部。这是我目前所拥有的
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='./includes/js/jquery-2.0.0.min.js'></script>
<link rel='stylesheet' type='text/css' href='./includes/css/css.css'/>
<p id="title">
Test
</p>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
background-image: linear-gradient(to bottom, #dcdcdc 0%, #b0b0b0 100%);
}
#title {
color:red;
}
但它看起来不像我想要的样子。这最终得到大约 100 像素高度的线性渐变，然后不断向下重复。类似于此图片:
有人知道怎么回事吗？
最佳答案
这不仅仅是 IE10 的问题；事实上，这是设计使然。
背景有special behavior当应用于 body 和/或 html 时。当您在不触及 html 的情况下将背景应用于 body 时，发生的情况是 body 背景被传播到视口(viewport)，并且该背景就像在 上声明的一样>html:
For documents whose root element is an HTML
HTMLelement or an XHTMLhtmlelement: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTMLBODYor XHTMLbodychild element. The used values of thatBODYelement's background properties are their initial values, and the propagated values are treated as if they were specified on the root element.
即使以其他方式出现，html 和 body 元素实际上并不是以固有的 100% 高度开始的(除了在 IE 中的 quirks 模式)；相反，它们采用内容的高度，就像任何其他积木盒一样。这意味着 html 的高度与 p 元素及其默认边距(与 body 元素折叠)的组合高度相同。
虽然渐变背景默认设计为在整个高度和宽度上延伸，但 html 的实际高度不允许渐变有足够的空间来覆盖整个视口(viewport)，因此它仅在开始重复之前拉伸(stretch)到一定高度。据我所知，这种行为在所有根据最新标准实现渐变的浏览器中都是一致的。
如果您想让渐变延伸到整个视口(viewport)，即使整个页面的内容不够，只需添加此规则:
html {
min-height: 100%;
}
如果需要，您也可以将背景样式从 body 移动到 html，但只要您只在其中一个元素上设置背景时间，将它应用到哪一个都没有区别。
关于css - 如何在IE10中使用css线性渐变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16181155/