Geek Answers Handbook

How to use linear css gradients in IE10?

In IE10, I am trying to create a linear css gradient, from the top of the page to the bottom of the page. This is what I still have

<!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 with linear gradients that are 100 pixels high, and then continue to repeat down. Like this image:

enter image description here

Does anyone know what is wrong?

+3
source share
2 answers

This is not a problem with IE10; in fact, it is by design.

body / html. body, html, , , , html:

, HTML html XHTML html: "background-image" "none" " " , HTML body XHTML body . body , , .

, , html body 100% ( IE quirks); , -. , html , p ( body).

, html , , . AFAIK, , .

, , , :

html {
    min-height: 100%;
}

, body html, , , .

+5

.

background-attachment:fixed

, , , . , , background-attachment.

+1

More articles:


All Articles