如何在IE10中使用CSS线性渐变？ [英] How to use css linear gradients in IE10?
问题描述
在IE10中，我试图创建一个css线性渐变，从页面的顶部到页面的底部。这是我到目前为止
<！DOCTYPE HTML>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> Test< / title>
< / head>
< body>
< meta http-equiv =X-UA-Compatiblecontent =IE = 10>
< meta http-equiv =Content-Typecontent =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;
}
但它看起来不像我想要的样子。最终得到的线性渐变的高度为100px，然后不断向下重复。类似于此图片：
有人知道有什么错误吗？
问题单独IE10;
背景有正文和/或 html 时，rel =nofollow>特殊行为。当您在不触及 html 的情况下对 body 应用背景时，会发生的事情是，body背景会传播到视口，并且该背景行为好像是在 html 上声明的：
根元素是HTML
HTML元素或XHTMLhtml元素：如果计算的'background-image'值根元素为none，其background-color为transparent，用户代理必须从该元素的第一个HTMLBODY中传播背景属性的计算值，或XHTMLbody子元素。BODY元素的背景属性的使用值是其初始值，传播的值被视为在根元素上指定。
即使不是这样， html 和正文元素实际上并不以固有的100％高度开始（除了IE中的怪异模式）;而是他们采取其内容的高度，就像任何其他块框。这意味着 html 的高度与您的 p 元素的组合高度相同，其默认边距（折叠为默认情况下，渐变背景被设计为在整个高度和宽度上延伸，但是 实际高度 html 不允许有足够的空间用于渐变覆盖整个视口本身，因此它只能拉伸到一定的高度，然后开始重复。 AFAIK，这种行为在所有浏览器中是一致的，根据最新的标准实现渐变。
如果你想让整个视口的梯度伸展，对整个页面足够的内容，只需添加以下规则：
html {
min-height：100％;
}
如果需要，可以从 body 到 html ，但是只要你一次只为其中一个元素设置一个背景，您应用它的差异。
In IE10, I am trying to create a css linear gradient, from the top of the page to the bottom of the page. This is what I have so far
<!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;
}
But it doesn't look the way I want it to look. This ends up with linear gradients that's about the height of 100px, then keeps repeating downwards. Similar to this image:
Does anyone know whats wrong?
This is not an issue with IE10 alone; in fact, it's by design.
Backgrounds have special behavior when applied to body and/or html. When you apply a background to body without touching html, what happens is that the body background gets propagated to the viewport, and that background acts as if it were declared on 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.
Even though it appears otherwise, the html and body elements don't actually start with an intrinsic 100% height (except in IE in quirks mode); rather they take the height of their contents, just like any other block boxes. This means html is the same height as the combined height of your p element and its default margins (which are collapsed with the body element).
While gradient backgrounds are designed to stretch across the full height and width by default, the actual height of html doesn't allow enough room for a gradient to cover the entire viewport by itself, so it only stretches to a certain height before it starts repeating. AFAIK, this behavior is consistent across all browsers that implement gradients according to the latest standard.
If you want to make the gradient stretch across the whole viewport even if there isn't enough content for the whole page, simply add this rule:
html {
min-height: 100%;
}
If you want, you can move the background styles from body to html as well, but as long as you only set a background on one of those elements at a time, it doesn't make a difference which one you apply it to.
这篇关于如何在IE10中使用CSS线性渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
