Я сделал две простые кнопки ссылок, которые расположены внутри двух тегов 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>
И вот конечный результат:
Проблема в том, что правая граница .border-gold
меняет толщину при изменении размера экрана браузера:
Я не понимаю, почему это происходит. Я пробовал использовать это, но ничего не изменилось.
Для тестирования использую Google Chrome v69.
Мне нужно что-то добавить?
Нет, только изменить размер окна браузера
Попробуйте исправить ширину для кнопки ссылки и обтекания, например ~ jsbin.com/bonateq/edit?html,css,output
Я не могу воспроизвести это с помощью изменения размера (с помощью Chrome), хотя масштабирование дает описанную проблему
При масштабировании возникают проблемы с округлением, которые могут вызвать это. Один из способов - использовать псевдоэлемент с абсолютным позиционированием, который переполняет кнопку с каждой стороны, с размером 1 или 2 пикселя, с тем же цветом границы или фона, что и основная граница. Если при этом возникает нежелательное переполнение гибкого контейнера, установите hidden
на его overflow
.
@HamSter Ваше решение - лучшее. Однако я хочу получить конкретный ответ на проблему, потому что это происходит не в первый раз. Почему я должен указать фиксированный размер для основного контейнера .lang-box
? Теги a
должны быть обернуты внешними DIV, или я ошибаюсь?
@LGSon Я сделал гифка, который показывает проблему
@inGranator Мы не можем отладить изображение. Вам необходимо предоставить фрагмент кода в вопросе, который воспроизводит проблему, иначе никто не сможет предложить правильное решение (кроме как догадываться).
@inGranator, у меня нет ответа, но я думаю, что это из-за особенности flex
и flex-direction: column
. Даже когда мы устанавливаем фиксированную ширину элемента внутри гибкого блока, она не всегда учитывается. Поэтому для блоков с фиксированной шириной нужно дополнительно указывать flex-grow: 0; flex-shrink: 0;
. Итак ... для flex-direction: column
... добавьте ширину исправления для переноса и внутренней ссылки. ....
Попробуйте добавить ссылки 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
... добавьте ширину исправления для переноса и внутренних ссылок.
ты увеличиваешь масштаб?