Как решить проблему когда браузер неправильно отображает width?
Дал всем псевдоклассам и span height: 2px; но почему то браузер отображает span толще чем псевдоклассы. Как решить? Проблема наверное не в браузере так как при залитии на хостинг и просмотре с телефона (iOS) они остаются такими же не правильными.
<div class="header__burger"> <span></span> </div> |
<div class="header__burger"> <span></span> </div>
.header__burger { position: relative; width: 30px; height: 30px; } .header__burger span::before { content: ""; width: 30px; height: 2px; background: #000; position: absolute; left: 0; top: 10px; } .header__burger span::after { content: ""; width: 30px; height: 2px; background: #000; position: absolute; left: 0; top: -10px; } .header__burger span { width: 30px; height: 2px; background: #000; position: absolute; left: 0; top: 50%; } |
.header__burger { position: relative; width: 30px; height: 30px; } .header__burger span::before { content: ""; width: 30px; height: 2px; background: #000; position: absolute; left: 0; top: 10px; } .header__burger span::after { content: ""; width: 30px; height: 2px; background: #000; position: absolute; left: 0; top: -10px; } .header__burger span { width: 30px; height: 2px; background: #000; position: absolute; left: 0; top: 50%; }
Дополнительно:
лучше использовать border вместо height + background, у бордеров чуть меньше вероятность косяков с толщиной при масштабировании
Ответы:
ищите просачивающиеся стили, т.к. приведённый код в изоляции работает как положено
snippet
- у меня он и тут отображается не правильно)
- jango81, дробное масштабирование в браузере и/или в операционной системе?
- не понял что такое дробное масштабирование
- jango81, не целое, т.е. не 100%, 200%, 300%
- IvanU7n, браузер 100% масштаб, винда 125% менял на 100% не помогло
- jango81, в общем направление поиска понятно, вероятно нужно перезагрузиться, чтобы браузер подхватил новый масштаб
т.к. приведённый код работает как положено, проблема локальная - IvanU7n, я бы так не переживал если бы на другом устройстве (телефоне) оно нормально отображалось. В любом случае спасибо
- jango81,
я бы так не переживал если бы на другом устройстве (телефоне) оно нормально отображалось.
Особенность конкретного браузера, у меня такие проблемы периодически с малыми элементами svg.
В любом случае спасибо
Жмите соответствующие кнопки под ответом.
- jango81, У меня аналогично на ПК, криво и масштабирование 125%, но на телефоне всё норм. Дело 100% в масштабировании. Я раньше не использовал монитор, на котором масштабирование было, именно из-за этого.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы решить проблему с неправильным отображением ширины элементов в браузере, можно использовать следующие подходы:
1. Убедитесь, что у элемента, ширина которого неправильно отображается, правильно заданы стили. Например, если вы используете CSS, убедитесь, что у элемента есть правильное значение для свойства "width". Может быть, стоит также проверить другие свойства, которые могут влиять на ширину элемента, такие как padding, margin и border.
2. Проверьте, нет ли у элемента родительских элементов или других элементов на странице, которые могут влиять на его ширину. Иногда стили других элементов могут пересекаться и приводить к неправильному отображению ширины.
3. Если проблема возникает из-за того, что браузер неправильно интерпретирует ширину элемента, попробуйте использовать CSS свойство "box-sizing". Установите его значение в "border-box", чтобы ширина элемента включала в себя padding и border, а не только содержимое.
Пример использования "box-sizing" в CSS:
.element { box-sizing: border-box; width: 100px; padding: 10px; border: 1px solid #000; }
Эти подходы помогут вам исправить проблему с неправильным отображением ширины элементов в браузере и обеспечить правильное отображение вашего контента.