CSS - Исправлено изменение ширины границы при изменении размера окна браузера

Я сделал две простые кнопки ссылок, которые расположены внутри двух тегов div.

Это код css и html, который я пробовал:

.lang-box {
  position: absolute;
  bottom: 60px;
  left: 2%;
  z-index: 3;
}

.flex-container {
  display: flex;
}

.flex-direction-column {
  flex-direction: column;
}

.border-gold {
  border: 2px solid #ac8b45;
}

.text-gold {
  color: #ac8b45;
}

.background-gold {
  background-color: #ac8b45;
}

.text-black {
  color: #000;
}

.no-background {
  background-color: transparent;
}

.lang-a-button {
  text-decoration: none;
  outline: 0;
  display: block;
  font-size: 20px;
  padding-bottom: 6px;
  padding-top: 10px;
  padding-left: 6px;
  padding-right: 6px;
  height: auto;
  text-align: center;
}

.lang-a-button:hover {
  text-decoration: none;
  opacity: .7;
}
<div class = "lang-box">
  <div class = "flex-container flex-direction-column border-gold">
    <a href = "/en" target = "_self" class = "lang-a-button no-background text-gold" title = "Change to English">EN</a>
    <a href = "/" target = "_self" class = "active_lang lang-a-button text-black background-gold" title = "Cambia in Italiano">IT</a>
  </div>
</div>

И вот конечный результат:

CSS - Исправлено изменение ширины границы при изменении размера окна браузера

Проблема в том, что правая граница .border-gold меняет толщину при изменении размера экрана браузера:

CSS - Исправлено изменение ширины границы при изменении размера окна браузераCSS - Исправлено изменение ширины границы при изменении размера окна браузера

Я не понимаю, почему это происходит. Я пробовал использовать это, но ничего не изменилось.

Для тестирования использую Google Chrome v69.

Мне нужно что-то добавить?

ты увеличиваешь масштаб?

Temani Afif 25.10.2018 18:06

Нет, только изменить размер окна браузера

Z.Dima 25.10.2018 18:07

Попробуйте исправить ширину для кнопки ссылки и обтекания, например ~ jsbin.com/bonateq/edit?html,css,output

HamSter 25.10.2018 18:15

Я не могу воспроизвести это с помощью изменения размера (с помощью Chrome), хотя масштабирование дает описанную проблему

Ason 25.10.2018 18:23

При масштабировании возникают проблемы с округлением, которые могут вызвать это. Один из способов - использовать псевдоэлемент с абсолютным позиционированием, который переполняет кнопку с каждой стороны, с размером 1 или 2 пикселя, с тем же цветом границы или фона, что и основная граница. Если при этом возникает нежелательное переполнение гибкого контейнера, установите hidden на его overflow.

Ason 25.10.2018 18:34

@HamSter Ваше решение - лучшее. Однако я хочу получить конкретный ответ на проблему, потому что это происходит не в первый раз. Почему я должен указать фиксированный размер для основного контейнера .lang-box? Теги a должны быть обернуты внешними DIV, или я ошибаюсь?

Z.Dima 26.10.2018 10:28

@LGSon Я сделал гифка, который показывает проблему

Z.Dima 26.10.2018 11:07

@inGranator Мы не можем отладить изображение. Вам необходимо предоставить фрагмент кода в вопросе, который воспроизводит проблему, иначе никто не сможет предложить правильное решение (кроме как догадываться).

Ason 26.10.2018 13:00

@inGranator, у меня нет ответа, но я думаю, что это из-за особенности flex и flex-direction: column. Даже когда мы устанавливаем фиксированную ширину элемента внутри гибкого блока, она не всегда учитывается. Поэтому для блоков с фиксированной шириной нужно дополнительно указывать flex-grow: 0; flex-shrink: 0;. Итак ... для flex-direction: column ... добавьте ширину исправления для переноса и внутренней ссылки. ....

HamSter 26.10.2018 14:22
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
9
1 526
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте добавить ссылки flex-grow:0; flex-shrink:0; и фиксированной ширины, например:

* {
  box-sizing: border-box;
}

.lang-box {
    position: absolute; 
    top: 60px;
    left: 2%; 
    z-index: 3;
  
  width: 42px;
}

.flex-container{
  display: flex;
  width: 100%;
}

.flex-direction-column{
    flex-direction: column;
}

.border-gold{
    border: 2px solid #ac8b45;
}

.text-gold{
  color: #ac8b45;
}

.background-gold{
    background-color: #ac8b45;
}

.text-black{
    color: #000;
}

.no-background{
  background-color: transparent;
}

.lang-a-button{
    text-decoration: none;
    outline: 0;
    display: block;
    font-size: 20px;
    padding-bottom: 6px;
    padding-top: 10px;
    /* padding-left: 6px;
    padding-right: 6px; */
    height: auto;
    text-align: center;
  
  width: 100%;
  flex-grow:0;
  flex-shrink:0;
  width: 40px;
}

.lang-a-button:hover{
    text-decoration: none;
    opacity: .7;
}
<div class = "lang-box">
    <div class = "flex-container flex-direction-column border-gold">
         <a href = "/en" target = "_self" class = "lang-a-button no-background text-gold" title = "Change to English">EN</a>
          <a href = "/" target = "_self" class = "active_lang lang-a-button text-black background-gold" title = "Cambia in Italiano">IT</a>
    </div>
</div>

У меня нет точного ответа, но я думаю, что это из-за особенности flex и flex-direction: column. Даже когда мы устанавливаем фиксированную ширину элемента внутри блока flex, она не всегда учитывается. Поэтому для блоков с фиксированной шириной нужно дополнительно указывать flex-grow: 0; flex-shrink: 0;.

Итак ... для flex-direction: column ... добавьте ширину исправления для переноса и внутренних ссылок.

Другие вопросы по теме