Floated элемент с отрицательным полем вызывает ошибку обертывания текста?

Ответ 1

Я бы не сказал, что это ошибка, как вы указали: она ведет себя одинаково в браузерах WebKit. В противном случае нам пришлось бы классифицировать каждое отдельное различие между браузерами как ошибки.

Хотя есть люди, которые уже сообщали о подобной проблеме на Webkit.org: http://bugs.webkit.org/show_bug.cgi?id=63074

Но это не ограничивается абзацами, такое же поведение можно найти и в списках и заголовках.

См. пример: http://jsbin.com/uzozus/1/edit

Объяснение этого поведения в браузерах Webkit:

Если отрицательный запас применяется против float, он создает пустоту что приводит к перекрытию содержимого.

Источник: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Пусть это применимо к вашему примеру: ваша ширина изображения равна 16px на 16 пикселей, поэтому для выравнивания этого значения с отрицательным полем 30px мы должны добавить 14px по горизонтали

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

См. пример: http://jsbin.com/onoced/37/edit

Ответ 2

Это, безусловно, похоже на ошибку. Если вы ищете обход, вы должны иметь возможность обернуть изображение с помощью span и поплавать за оболочку вместо изображения.

вот так:

<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>

используя эти правила css вместо исходного img правила:

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

Здесь приведенный пример: http://jsbin.com/onoced/12/edit

Ответ 3

Пожалуйста, попробуйте этот код:  Я тестировал его, например, на mozilla, crome, opera и safari.

проверено в сафари Apple, а также

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

во всех браузерах обрабатывается тот же и завернутый

Ответ 4

Это мое решение:

<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>

Ответ 5

Я не уверен, что это ошибка, но, похоже, она ограничена WebKit (также проверена в Safari). Я столкнулся с проблемой в прошлом с отрицательными полями, влияющими на родительские элементы.

По моему опыту отрицательные поля могут быть непредсказуемыми и, как показано здесь, часто отображаются по-разному в разных браузерах. Есть ли причина, по которой вы не можете использовать этот тип макета...

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

Ответ 6

Похоже, вы заметили ошибку.

Это похоже на другую активную ошибку в отношении отрицательных полей и обертывания текста: Issue 141887. Скорее всего, они оба связаны между собой.

Ответ 7

Да, это похоже на ошибку. Другой вариант, который вы можете рассмотреть, - установить display на block на изображении и добавить отрицательное нижнее поле в 1 строке.

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

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

Ответ 8

Я не знаю, какова ваша цель, но позвольте сказать, что мне не нравится бросать текст таким образом, и я всегда предпочитаю помещать его в теги. Поэтому для меня лучшее решение (минуя "ошибка"!):

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

Ответ 9

Один простой способ исправить эту проблему - просто нажать изображение перед абзацем, а затем удалить отрицательное поле:

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 Bin:

Ответ 10

Я не знаю, какова ваша цель, но позвольте сказать, что я не люблю бросать текст таким образом, и я всегда предпочитаю помещать его в теги. Поэтому для меня лучшее решение (минуя "ошибка"!):

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

Ответ 11

Как упоминал Яспер де Фриз, я бы установил img для отображения: block. Поскольку маржа с встроенными элементами имеет непредсказуемые результаты. Я также установил бы тег p для отображения: 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 по вводу