Блог

Главная - Вопросы по программированию - Различия в рендеринге с пробелом: предварительный перенос

Различия в рендеринге с пробелом: предварительный перенос

#html #css #webkit

#HTML #css #webkit

Вопрос:

Я обнаружил неожиданный рендеринг в веб-приложении, над которым я работаю. Это воспроизводимо в Chrome и Opera, но не в Firefox, Edge или Internet Explorer. Это предполагает ссылку на Webkit.

В любом случае, вот наименьшее воспроизведение, которое я смог найти. 

 div { white-space:pre-wrap; }  
 <div style="width:10px; background:blue; ">                      </div>
<div style="width:2px;  background:green;">                      </div>

Неожиданным в этом является то, что в Chrome и Opera (на моей машине) зеленый прямоугольник намного выше синего.

Каково правильное поведение в этом случае? Должен ли я сообщить об ошибке для webkit?

Для тех, кто не может воспроизвести (например, macOS), вот скриншот.

скриншот

Комментарии:

1. для меня все браузеры на моем MacBook выглядят одинаково. Safari 10 выглядит как Chrome и Firefox. вы можете сделать снимок экрана?

2. На первый взгляд кажется, что WebKit прав; pre-wrap предполагается, что он сохраняет пробелы, и каждый указанный вами пробел имеет ширину ~ 2 пикселя, поэтому он переносит их в новые строки.

3. @TylerH: Вы правы, что пробелы переносятся, но это не полностью объясняет это. Почему в синем прямоугольнике также нет обернутых строк?

4. При тестировании в Chrome проблема заключается в ширине div. При 3px и менее оба divs переносятся. При 4px и выше ни один div не переносится. Вопрос в том, что вызывает изменение на отметке 3-4 пикселя?

5. @recursive Я не думал об этом до тех пор, пока не покинул компьютер на вечер… упс! Тем не менее, здесь какое-то странное поведение.