Блог

Я обнаружил то, что кажется очень странным поведением в Safari, и я не могу понять, что происходит.

Мой макет, просмотренный в Chrome:

Но при просмотре в Safari я получаю следующее:

По какой-то странной причине <small class="text-muted">(required)</small> часть моего HTML была перенесена на новую строку.

Что еще более странно, если я просто изменю одну букву в слове «Город», макет станет правильным.

Та же часть моей формы, но я буквально изменил одну вещь, а именно, я изменил слово ‘City’, чтобы вместо него было написано ‘Sity’:

На самом деле, кажется, я могу использовать любое слово вместо ‘City’, но когда я использую слово ‘City’, метка внезапно занимает 2 строки. Итак, в свете этого есть простое исправление, которое заключается в том, чтобы просто использовать слово ‘Town’ вместо слова ‘City’, но я все равно хотел бы знать, действительно ли это странная ошибка или я что-то упускаю.

Что, черт возьми, здесь происходит?

Мне не удалось воссоздать эту проблему в инструменте stack overflow для обработки фрагментов кода.

Я использую Bootstrap 4, и часть HTML, на которую я смотрю, выглядит следующим образом:

 <div class="form-row">
  <div class="form-group needs-validation col-sm-6 col-md-6">
    <label for="inputCity">City <small class="text-muted">(required)</small></label>
    <input type="text" class="form-control" id="inputCity" name="city" required>
    <div class="invalid-feedback">
      Please provide your city.
    </div>
  </div>
  <div class="form-group needs-validation col-sm-6 col-md-4">
    <label for="inputState">State <small class="text-muted">(required)</small></label>
    <input type="text" class="form-control" id="inputState" name="state" required
              autocomplete="address-level1">
    <div class="invalid-feedback">
      Please provide your state.
    </div>
  </div>
  <div class="form-group needs-validation col-5 col-sm-4 col-md-2">
    <label for="inputZip">Zip <small class="text-muted">(required)</small></label>
    <input type="text" class="form-control" id="inputZip" name="zip" required>
    <div class="invalid-feedback">
      Please provide your zip code.
    </div>
  </div>
</div>
  

РЕДАКТИРОВАТЬ ответы на комментарии

@Rdg Замена пробела на amp;nbsp; действительно исправляет макет. Но почему это происходит только тогда, когда за ним следует слово ‘City’ и ничего больше (конечно, я не тестировал каждое слово в английском языке, так что, может быть, это как-то связано с точной шириной слова ‘City’?)

@Geuis Да, мне наконец удалось воссоздать это в codepen, похоже, проблема в используемом мной шрифте («Raleway») и точной ширине слова «Город». https://codepen.io/Redtama/pen/RdRpqX

@Richard Uie Я не уверен, что вы имеете в виду под substitute the HTML entity for uppercase "c," i.e., amp;amp;#67; , но что касается переноса, вызванного шириной, я могу заменить слово «Город» чем-то гораздо более длинным, и перенос не произойдет.

Пример с более длинным текстом метки

Я бы рекомендовал добавить в ваш css следующее, чтобы текст стал встроенным элементом:

 .text-muted {
  display: inline-block;
}