Я использую знаменитый японский шрифт под названием «Meiryo» на японском веб-сайте. Однако использование этого шрифта заставляет все мои поля ввода растягиваться. Это очень странная ошибка, если я заменю шрифт чем-нибудь еще, все мои поля ввода вернутся к нормальному состоянию.Использование шрифта Meiryo приводит к увеличению поля ввода
Любой может объяснить мне, почему эта ошибка возникает, пожалуйста?
Проверено на всех основных браузерах
Это не ошибка. Элемент <input type=text> имеет свой видимый размер, заданный атрибутом size (по умолчанию 20), который устанавливает ширину в «символах». Это означает, что символы «средней ширины» соответствуют HTML 4, в то время как черновики HTML5 говорят, что «пользовательский агент должен обеспечить видимость хотя бы этого количества символов». Реальность варьируется в разных браузерах. В любом случае видимая ширина элемента должна зависеть и фактически зависит от свойств шрифта - от ширины глифов в нем.
Следующий простой тест (который предполагает некоторый общий шрифт по умолчанию, который будет использоваться для input) иллюстрирует это:
<input value="Hello world"><br>
<input value="Hello world" style="font-family: Meiryo">
Последний элемент значительно шире, и, глядя на внешний вид исходного текста, набор вы можете видеть причину этого: в Meiryo символы (глифы) обычно шире, чем шрифты, обычно используемые по умолчанию для input.
Выводы зависят от дизайна страницы и расположения. В гибком дизайне детали макета адаптируются к требованиям данных и шрифтов, а не наоборот. Если конструкция более жесткая, вы можете рассмотреть возможность установки верхнего предела ширины в CSS, используя пиксели, если вы действительно должны, например. max-width: 200px.
это шрифт Issue
использования CSS ширина и высота свойство решить проблему