Этот выглядит как ошибка обертывания текста в webkit, или я что-то пропустил?
DOM:
<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
Скриншоты:
Я бы не сказал, что это ошибка, как вы указали: она ведет себя одинаково в браузерах 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
Это, безусловно, похоже на ошибку. Если вы ищете обход, вы должны иметь возможность обернуть изображение с помощью 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
Пожалуйста, попробуйте этот код: Я тестировал его, например, на mozilla, crome, opera и safari.
проверено в сафари Apple, а также
во всех браузерах обрабатывается тот же и завернутый
Это мое решение:
<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>
Я не уверен, что это ошибка, но, похоже, она ограничена WebKit (также проверена в Safari). Я столкнулся с проблемой в прошлом с отрицательными полями, влияющими на родительские элементы.
По моему опыту отрицательные поля могут быть непредсказуемыми и, как показано здесь, часто отображаются по-разному в разных браузерах. Есть ли причина, по которой вы не можете использовать этот тип макета...
Похоже, вы заметили ошибку.
Это похоже на другую активную ошибку в отношении отрицательных полей и обертывания текста: Issue 141887. Скорее всего, они оба связаны между собой.
Да, это похоже на ошибку. Другой вариант, который вы можете рассмотреть, - установить display на block на изображении и добавить отрицательное нижнее поле в 1 строке.
img {
display: block;
margin-left: -30px;
margin-bottom: -1em;
}
Я не знаю, какова ваша цель, но позвольте сказать, что мне не нравится бросать текст таким образом, и я всегда предпочитаю помещать его в теги. Поэтому для меня лучшее решение (минуя "ошибка"!):
<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.
Один простой способ исправить эту проблему - просто нажать изображение перед абзацем, а затем удалить отрицательное поле:
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; */
}
Я не знаю, какова ваша цель, но позвольте сказать, что я не люблю бросать текст таким образом, и я всегда предпочитаю помещать его в теги. Поэтому для меня лучшее решение (минуя "ошибка"!):
<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.
Как упоминал Яспер де Фриз, я бы установил 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. Скопируйте и запустите код в подтверждение для подтверждения.