1

次のコードを使用して、完全な背景、ボックス、ヘッダー、およびフッターをレンダリングしています。すべてがすべてのブラウザーでうまく機能します (ie8+、ie7 は気にしません)。しかし ie8 では、背景の周りに 1px の境界線がレンダリングされます。なんで？

    <style type="text/css">

        /*
            start reset
            http://meyerweb.com/eric/tools/css/reset/ 
        */

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        article, aside, details, figcaption, figure, 
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /*
            end reset
        */

        .header, .footer
        {
            position: fixed;
            z-index: 2;
            left: 0px;
            width: 100%;
            background: white;
            opacity: 0.4;
            filter: alpha(opacity=40);
        }

        .header
        {
            top: 0;
            height: 30px;
        }

        .footer
        {
            bottom: 0px;
            height: 30px;
        }

        .box
        {
            position: relative;
            float: right;
            z-index: 2;
            margin: 100px 100px 0 0;
            width: 300px;
            padding: 20px;
            background: white;
            -moz-box-shadow: 0 0 20px black;
            -webkit-box-shadow: 0 0 20px black;
            box-shadow: 0 0 20px black;
        }

        .background
        {
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
        }

        .background img
        {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            min-width: 50%;
            min-height: 50%;
        }

        p
        {
            font: 15px/2 Georgia, Serif;
            text-indent: 40px;
        }

    </style>

</head>

<body>

    <div class="header">
        Vestibulum erat wisi.
    </div>

    <div class="box">
        <p>
            Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sitamet, wisi. Aenean
            fermentum, elit eget tincidunt condimentum, erosipsum rutrum orci, sagittis tempus
            lacus enim ac dui. Donec non enimin turpis pulvinar facilisis. Ut felis. Praesent
            dapibus, neque idcursus faucibus, tortor neque egestas augue, eu vulputate magna
            eroseu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsanporttitor,
            facilisis luctus, metus.
        </p>
    </div>

    <div class="footer">
        Vestibulum erat wisi.
    </div>

    <div class="background">
        <img src="http://mslove88.files.wordpress.com/2011/10/mountain.jpg" alt="" />
    </div>
4

4 に答える 4

2

リセット スタイルシートを使用していますか?

本文のマージン/パディング設定になる可能性があるためです。すべてのブラウザには独自のデフォルトの CSS スタイルシートがあり、スタイルシートをリセットすると、すべてが 0 に「リセット」されてすべて同じになります。

Google の結果の最初のもの: http://meyerweb.com/eric/tools/css/reset/

于 2012-05-04T11:11:55.707 に答える
2

内部のCSSに次のコードを配置するだけで<style>、問題が解決することを願っています.

html { border:none; }

于 2012-05-04T11:12:30.133 に答える
1

私のサイトでも同じ問題に直面しています。だから私は以下のように負の点で値を与えます。それを試してみてください。体の部分でやります。フォーム、div にもこれを試すことができます。

<body style="margin-top: -10px; margin-left: 0px; margin-right: 0px; padding: 0px;>
于 2012-05-04T11:12:58.283 に答える
0

以下のようにコードを変更します。div、form、body タグも 1 つずつ試してください。

.background img
        {
            position: absolute;
            top: -5;
            left: -5;
            right: -5;
            bottom: -5;
            margin: auto;
            min-width: 50%;
            min-height: 50%;
        }
于 2012-05-04T11:38:59.860 に答える