Question

我使用以下代码渲染完整的背景，框，页眉和页脚。所有浏览器中的一切都很棒（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>

Answer 1

您使用重置样式表吗？

因为它可以是身体边距/填充设置。每个浏览器都有自己的默认CSS样式表，并且重置样式表'将其全部重置为0，使它们全部相同。

Google搜索结果中的第一个：http://meyerweb.com/eric/tools/css/reset/

Answer 2

只需将以下代码放在<style>内的CSS上，我希望它能解决您的问题。

html { border:none; }

Answer 3

我的网站也遇到了同样的问题。所以我给出了负值，如下所示。试试吧。我是为身体部分做的。您也可以尝试使用form，div。

<body style="margin-top: -10px; margin-left: 0px; margin-right: 0px; padding: 0px;>

Answer 4

更改您的代码，如下所示。也可以逐个尝试div，form，body标签。

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

完整的背景和非预期的1px边框

4 个答案: