完全な背景と予想されない1pxの境界

完全な背景、ボックス、ヘッダー、およびフッターをレンダリングするために、次のコードを使用しています。すべてがすべてのブラウザ（ie8 +、私はie7を気にしない）で偉大な作品です。しかし、ie8では、1pxのボーダーが背景の周りにレンダリングされます。どうして？完全な背景と予想されない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>

出典

2012-05-04 user1330271

JSFiddleそれを望む人のために：http://jsfiddle.net/NGqY4/ – isNaN1247

左上の何か？ – Nadh

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

ボディマージン/パディング設定ができるので、すべてのブラウザには独自のデフォルトCSSスタイルシートがあり、リセットスタイルシートはすべて0に設定されており、すべて同じになっています。 Googleの検索結果で

まず1：http://meyerweb.com/eric/tools/css/reset/

出典

2012-05-04 11:11:55

yeh、まだそこに。 = \ – user1330271

ヘッダーの「カットオフ」ですか、またはヘッダーが1ピクセル下に移動していますか？（左と同じ） –

わかりませんが、1pxをカットしているようです。 – user1330271

だけ<style>内のCSSに以下のコードを配置し、私はそれはあなたの問題を解決することを願っています。

html { border:none; }

出典

2012-05-04 11:12:30 Jhilom

、まだそこにあります。 = \ – user1330271

私はまた、私のサイトで同じ問題に直面しています。だから私は以下のようなマイナス点で値を与える。それを試してみてください。私はボディセクションのためにそれをする。これはフォームのdivでも試してみてください。

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

出典

2012-05-04 11:12:58

IEは私にとって問題になります。だから私はこれを試して、それはうまく動作します。それを試してみてください。 –

まだそこにある国境= \ – user1330271

divタグとフォームタグも試してみてください。 –

コードを以下のように変更します。 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-04 11:38:59

完全な背景と予想されない1pxの境界

答えて

関連する問題