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

本文介绍了如何在IE10中使用CSS线性渐变？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在IE10中，我试图创建一个css线性渐变，从页面的顶部到页面的底部。这是我到目前为止

实际高度 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:

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线性渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！