8

序文: div 内の画像の周りに奇妙なスペースがあるなどの記事をたくさん読みました。

例 #1: div の不要な padding-bottom 例
#2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

彼らの問題は似ているようですが、私のものと同じではありません。このサンプル ドキュメントでは、ボーダー、パディング、アウトラインなどはゼロに設定されていますが、Opera と Firefox の両方が div の上部に予備のピクセルをレンダリングします。3番目はこのスペースをごまかすかもしれませんが、なぜそこにあるのか誰も答えないようです..

編集：私はこれに答えるのに魅力的に近い多くの記事を読みましたが、それらはすべて実際の問題とはわずかに異なっているようです.

私は何が欠けていますか？それは私の最初の質問ですので、しばらくお待ちください:)

<!doctype html>
<html>
  <head>
    <title>Anger</title>
    <style>
      *{
        cursor: default;
        margin: 0;
        outline: 0;
        border: none;
        padding: 0;
        text-decoration: none;
      }
      body{
        background-color: #87cefa;
      }
      div{
        background-color: #ffffff;
      }
      button{
        border-radius: 9px;
        padding: 1px 6px 2px 6px;
        font: 14px monospace;
        color: #ffffff;
        background-color: #1e90ff;
      }
    </style>
  <head>
  <body>
    <div>
      <button>Sample Button</button>
    </div>
  </body>
<html>

それをすべて機能させるCSS3はありますか？これは実験的なプロジェクトなので、最新の CSS3 を歓迎します。

PS:私は Opera のレンダリングだけに関心がありますが、同じ標準に準拠したコードで Firefox がサポートされると便利です.. ありがとう!

4

2 に答える 2

7

div の行の高さをゼロに変更します。

  div{
      background-color: #ffffff;
      line-height:0;
  }

jsFiddle の例

于 2012-07-15T18:39:57.590 に答える
4

ボタンの上部に垂直整列を設定します。それはそれを修正します。

于 2012-07-15T18:42:44.733 に答える