如何在IE10中使用css线性渐变？

Question

如何在IE10中使用css线性渐变？

ome*_*ega 3 css linear-gradients internet-explorer-10

在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>

Run Code Online (Sandbox Code Playgroud)

CSS

body {
    margin: 0px; 
    padding: 0px;
    background-image: linear-gradient(to bottom, #dcdcdc 0%, #b0b0b0 100%);
}



#title {
    color:red;
}

Run Code Online (Sandbox Code Playgroud)

但它看起来并不像我想要的样子.这最终得到的线性渐变大约是100px的高度,然后不断向下重复.与此图像相似:

在此输入图像描述

有谁知道什么是错的？

Answer 1

Bol*_*ock 5

这不仅仅是IE10的问题; 事实上,它是设计的.

应用于和/或时,背景具有特殊行为.当您在不触摸的情况下应用背景时,会发生的事情是身体背景传播到视口,并且该背景的行为就像它在以下情况下声明一样:bodyhtmlbodyhtmlhtml

对于其根元素是HTML HTML元素或XHTML html元素的文档:如果根元素上的"background-image"的计算值为"none"且其"background-color"为"transparent",则用户代理必须传播从该元素的第一个HTML BODY或XHTML body子元素计算背景属性的值.该BODY元素的背景属性的已使用值是它们的初始值,并且传播的值被视为在根元素上指定它们.

即使它看起来不是这样,html并且body元素实际上并不以固有的100%高度开始(除了在怪癖模式下的IE中); 相反,他们采取其内容的高度,就像任何其他块盒.这意味着html与p元素及其默认边距(与body元素折叠)的组合高度相同的高度.

虽然渐变背景设计为默认在整个高度和宽度上拉伸,但实际高度html不允许渐变的空间足以覆盖整个视口,因此它在开始重复之前仅延伸到某个高度.AFAIK,这种行为在所有根据最新标准实现渐变的浏览器中都是一致的.

如果要在整个视口中进行渐变拉伸,即使整个页面没有足够的内容,只需添加以下规则:

html {
    min-height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

如果需要,您也可以将背景样式移动body到html,但只要您一次只在其中一个元素上设置背景,那么将它应用于哪个元素并没有什么不同.

归档时间：	12 年，7 月前
查看次数：	2757 次
最近记录：	9 年，8 月前