3

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;
}

しかし、それは私が望むようには見えません。これにより、高さ約 100px の線形グラデーションが得られ、下に向かって繰り返します。この画像に似ています:

ここに画像の説明を入力

誰が何が悪いのか知っていますか？

4

2 に答える 2

5

これは IE10 だけの問題ではありません。実際、これは設計によるものです。

背景は、および/またはに適用されると特別な動作をします。に触れずに に背景を適用すると、ボディの背景がビューポートに伝播され、その背景が on で宣言されているかのように動作します。bodyhtmlbodyhtmlhtml

ルート要素が HTMLHTML要素または XHTMLhtml要素であるドキュメントの場合: ルート要素の 'background-image' の計算値が 'none' であり、'background-color' が 'transparent' である場合、ユーザー エージェントは代わりに、その要素の最初の HTMLBODYまたは XHTMLbody子要素から計算された背景プロパティの値。そのBODY要素の背景プロパティの使用値は初期値であり、伝達された値はルート要素で指定されたかのように扱われます。

そうではないように見えますが、htmlandbody要素は実際には固有の 100% の高さで開始されません (IE の quirks モードを除く)。むしろ、他のブロック ボックスと同様に、コンテンツの高さを取ります。これは、要素とそのデフォルトの余白 (要素とともに折りたたまれる)htmlを合わせた高さと同じ高さであることを意味します。pbody

グラデーションの背景は、デフォルトで高さと幅全体に広がるように設計されていますが、実際の高さでhtmlは、グラデーションがビューポート全体をカバーするのに十分なスペースがないため、繰り返しが始まる前に特定の高さまでしか伸びません。私の知る限り、この動作は、最新の標準に従ってグラデーションを実装するすべてのブラウザーで一貫しています。

ページ全体に十分なコンテンツがない場合でも、グラデーションをビューポート全体に広げたい場合は、次のルールを追加するだけです。

html {
    min-height: 100%;
}

body必要に応じて、背景スタイルを からに移動することもできますが、html一度にこれらの要素の 1 つだけに背景を設定する限り、適用する要素に違いはありません。

于 2013-04-24T01:03:39.643 に答える