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 里面<style>，我希望它能解决您的问题。

html { border:none; }

于 2012-05-04T11:12:30.133 回答
2

你使用重置样式表吗？

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

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

于 2012-05-04T11:11:55.707 回答
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 标签。

.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 回答