15

これは、Webkit のテキスト ラップ バグのように見えます。

ドム:

<div>
  <p>
    <img src="http://static.jsbin.com/images/favicon.png">
    no sea takimata sanctus estestest Lorem ...
  </p>
</div>

CSS:

div {
  width: 200px;
}

p {
 margin-right: 32px;
 padding-left: 30px;
}

img {
 float: left;
 margin-left: -30px;
}

間違ったテキスト ラップ

デモ: http://jsbin.com/onoced/1/edit

スクリーンショット:

クロム 22.0.1223.0 (149385) およびクロム 21.0.1180.79 Firefox 14.0.1 オペラ 12.00

4

11 に答える 11

8

ご指摘のとおり、これはバグではありません。WebKit ブラウザーでも同じように動作します。そうでなければ、ブラウザ エンジン間のすべての違いをバグとして分類する必要があります。

Webkit.org に同様の問題をすでに報告している人がいますが: http://bugs.webkit.org/show_bug.cgi?id=63074

しかし、これは段落に限ったことではなく、リストやヘッダーにも同じ動作が見られます。

例を参照してください: http://jsbin.com/uzozus/1/edit

Webkit ブラウザーでのこの動作の説明は次のとおりです。

負のマージンがフロートの反対側に適用されると、コンテンツのオーバーラップにつながる空白が作成されます。

ソース: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

これを例に適用してみましょう: 画像の幅は 16px x 16px なので、これを 30px の負のマージンに均等化するには、水平方向に 14px を追加する必要があります

  img {
    float: left;
    margin-left: -30px;
    padding:5px 14px 0 0;
  }

例を参照してください: http://jsbin.com/onoced/37/edit

于 2012-08-29T08:56:18.023 に答える
2

それは確かに私にはバグのように見えます。回避策を探している場合は、イメージをスパンでラップし、イメージの代わりにラッパー スパンをフロートできるはずです。

このような：

<h2>Float Left</h2>
<div>
  <p>
    <span class="icon"><img src="http://static.jsbin.com/images/favicon.png"></span>
    no sea takimata <span class="hightlight">sanctus estestest</span> Lorem ipsum dolor sit amet.
  </p>
</div>

img元のルールの代わりに、これらの css ルールを使用します。

.icon {
  float: left;
}
.icon > img {
  margin-left: -30px;
  background: pink;
  padding: 5px 0;
}

変更された例は次のとおりです: http://jsbin.com/onoced/12/edit

于 2012-08-23T22:14:23.053 に答える
1

このコードを試してみてください: 私は ie 、mozilla 、crome 、opera、safari でもテストしました。

Apple Safariでもテスト済み

http://jsfiddle.net/CrxQA/6/

すべてのブラウザで同じ扱いとラップ

于 2012-08-29T14:29:54.733 に答える
1

これが私の解決策です：

<style>
#main{
  width: 200px;
  height:200px;
}
#pic
{
    width:100px;/* or any size you like*/
    height:auto;
    float:left;
}
#txt
{
    width:100px;
    height:auto;
    float:left;
    overflow:hidden;
}
p 
{
 margin-right: 32px;
 padding-left: 30px;
}
</style>

HTML: 

<div id="main">
    <div id="pic">
        <img src="http://static.jsbin.com/images/favicon.png"/>
    </div>
    <div id="txt">
          <p>
            no sea takimata sanctus estestest Lorem ...
          </p>
    </div>
</div>
于 2012-08-30T12:01:24.847 に答える
0

この問題を解決する簡単な方法の1つは、段落の前に画像をプッシュしてから、負のマージンを削除することです。

DOM：

<div>
  <img src="http://static.jsbin.com/images/favicon.png">
  <p>
    no sea takimata sanctus estestest Lorem ...
  </p>
</div>

CSS：

div {
  width: 200px;
}

p {
 margin-right: 32px;
 padding-left: 30px;
}

img {
 float: left;
 /* margin-left: -30px; */
}

変更されたJSビンは次のとおりです。

于 2012-08-29T18:39:53.997 に答える
0

私はあなたの目標が何であるかはわかりませんが、私はそのようにテキストをスローするのが好きではなく、常にタグに入れることを好むとしましょう. したがって、私にとって最良の解決策（「バグ」をバイパスする!?）は次のとおりです。

<div>
 <img>     <p>text here </p> </div>

また
<section> <div class="try"> <img> <p>text here </p> </div> <div class="try"> <img> <p>text here </p> </div> <div class="try"> <img> <p>text here </p> </div> . . .

とにかく、word-wrap プロパティを使用して Ptag の集計を調整できます。

于 2012-08-30T08:11:40.600 に答える
0

はい、バグのようです。考慮すべきもう 1 つのオプションは、画像に を設定しdisplay、block1 行の負の下部余白を追加することです。

img {
  display: block;
  margin-left: -30px;
  margin-bottom: -1em;
}

http://jsbin.com/onoced/10/edit

于 2012-08-23T21:41:22.927 に答える
0

バグを発見したようです。

これは、負のマージンとテキストの折り返しに関する別の進行中のバグ (Issue 141887 ) に似ています。両方とも関連している可能性があります。

于 2012-08-23T15:52:42.030 に答える
0

あなたの目的はわかりませんが、私はそのようにテキストを投げるのが好きではなく、常にタグに入れることを好むとしましょう. したがって、私にとって最良の解決策（「バグ」をバイパスする!?）は次のとおりです。

<div>
    <img>
    <p>text here </p>
</div>

また

<section>
    <div class="try">    
        <img>
        <p>text here </p>
    </div>
    <div class="try">    
        <img>
        <p>text here </p>
    </div>
    <div class="try">    
        <img>
        <p>text here </p>
    </div>
    .
    .
    .
</section>

とにかく、word-wrap プロパティを使用して、Ptag の集計を調整できます。

于 2012-08-27T07:34:22.817 に答える
0

Jasper de Vries が述べたように、img を display:block に設定します。インライン要素を含むマージンは予測できない結果をもたらすため。また、p タグを display:block に設定します。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>JS Bin</title>
<style type="text/css">
  div {
    border: 1px solid red;
    margin: 20px 0;
    width: 200px;
  }

  p {
    background: #EEE;
    border-right: 1px solid green;
    margin: 0;
    margin-right: 20px;
    padding-left: 30px;
    display:block
  }

  img {
    background: pink;
    float: left;
    display:block;
    margin-left: -30px;
    padding: 5px 0;
  }

  .nf {
    float: none;
  }

  .abs {
    position: absolute;
  }

  .hightlight {
    background: rgba(255,255,0,0.2);
  }
</style>
</head>
<body>
  <h2>No Float</h2>
   <div>
    <p>
      <img class="nf" src="http://static.jsbin.com/images/favicon.png" alt="This make it W3C compliant">
      no sea takimata <span class="hightlight">sanctus estestest</span> Lorem ipsum dolor sit amet.
    </p>
  </div>
  <h2>Float Left</h2>
   <div>
    <p>
      <img src="http://static.jsbin.com/images/favicon.png" alt="This make it W3C compliant">
      no sea takimata <span class="hightlight">sanctus estestest</span> Lorem ipsum dolor sit amet.
    </p>
  </div>

  <h2>Position Absolute</h2> 
  <div>
    <p>
      <img class="abs fn" src="http://static.jsbin.com/images/favicon.png" alt="This make it W3C compliant">
      no sea takimata <span class="hightlight">sanctus estestest</span> Lorem ipsum dolor sit amet.
    </p>
  </div>
</body>
</html>

このコードは、W3C の最新の標準によって検証されています。コードをコピーして検証ツールに貼り付けて確認します。

入力による W3C バリデーター

于 2012-08-30T15:12:29.747 に答える
0

バグかどうかはわかりませんが、WebKit に限定されているようです (Safari でもテスト済み)。過去に、親要素に影響を与える負のマージンの問題に遭遇しました。

私の経験では、負のマージンは予測できない場合があり、ここに示されているように、ブラウザによって表示が異なることがよくあります。このタイプのレイアウトを使用できない理由はありますか...

http://jsbin.com/onoced/7/edit

于 2012-08-23T15:39:09.633 に答える