CSS странная вещь происходит при масштабировании

Question

CSS странная вещь происходит при масштабировании

0

это мой первый пост здесь. Я не знаю, как объяснить свою проблему, потому что я действительно не знаю, что заставляет мой CSS-код сломаться. Было бы проще показать вам фотографию.

Поэтому у меня есть тег div и входные и дочерние элементы div. Один из div - статический 32px x 32px, и я вычисляю его ширину с помощью calc (100% - 32px), но при масштабировании некоторые пиксели не заполняются входом.

Вот фотография проблемы: http://imgur.com/TkRFLde

Это происходит, когда зум не делится на 100. Например, он разрывается на 110%, 150% и 175%. Но это правильно, когда зум 100%, 200%, 300%...

Вот мой код:

<div class="search">
    <input type="text" value="Search" class="search-text" />
    <div class="search-icon" ></div>
</div>

CSS:

.search {
    height: 32px;
    width: 250px;
}
.search-text{
    float:left;
    width: calc(100% - 55px) !important;
    display: inline-block !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin: 0;width: 196px;
}
.search-icon{
    display: inline-block !important;
    background-color: #ACB6BE;
    height: 30px;
    width: 31px;
    float:right;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 1px solid #acb6be;
}
input[type=text] {
   border-radius: 5px;
   border: 1px solid #acb6be;
   min-width: 180px;
   color: #acb6be;
   padding: 0 10px;
   height: 30px;
   background-color: #fff;
   font-weight: 600;
}

Или jsfiddle: http://jsfiddle.net/39VDR/1/

Andrey Tsarev 08 май 2014, в 23:11

Источник

1

Лично меня не будут интересовать люди, которые не используют масштабирование по умолчанию. Это крайний случай с точки зрения дизайна
mituw16 08 май 2014, в 20:20
0

@ mituw16 Да, но я хочу совершенства для своих сайтов. Кроме того, мой дизайн адаптивный, поэтому эта проблема может возникнуть на мобильных устройствах, планшетах и т. Д.
Andrey Tsarev 08 май 2014, в 20:27
0

Является ли сайт идеальным, если он перегружен ненужным кодом?
Chris M 08 май 2014, в 21:14
0

И охвачены !important с
Zach Saucier 08 май 2014, в 21:22
0

Я пытался отладить ... Кроме того, в моем входном {...} CSS есть некоторые из этих параметров, поэтому я использую! И разве ты не должен помогать людям здесь, а не нападать на них?
Andrey Tsarev 08 май 2014, в 21:32
0

@ Андрей Мы здесь, чтобы помочь, но и дать совет. Вот то, что дает нам ваш код , между ними уже есть большой промежуток. Таким образом, того, что вы нам дали, недостаточно, чтобы мы могли вам помочь. Пожалуйста, предоставьте достаточный код или рабочий пример
Zach Saucier 08 май 2014, в 21:40
0

@ZachSaucier Отредактировано - jsfiddle.net/39VDR/1
Andrey Tsarev 09 май 2014, в 10:36
0

Ваши !important декларации могут быть просто заменены на более специфичные. input[type="text"].search-text заменит input[type="text"] . jsfiddle.net/39VDR/2 . CSS является каскадным, что означает, что он смотрит на свойства сверху вниз. Объявление width: ... !important; сопровождаемый width ...; глупо, так как вы можете просто поменять порядок и полностью отбросить !important
James Donnelly 09 май 2014, в 10:38

Показать ещё 6 комментариев

Теги:

html

css

input

1 ответ

Ещё вопросы

Лично меня не будут интересовать люди, которые не используют масштабирование по умолчанию. Это крайний случай с точки зрения дизайна
@ mituw16 Да, но я хочу совершенства для своих сайтов. Кроме того, мой дизайн адаптивный, поэтому эта проблема может возникнуть на мобильных устройствах, планшетах и т. Д.
Является ли сайт идеальным, если он перегружен ненужным кодом?
Я пытался отладить ... Кроме того, в моем входном {...} CSS есть некоторые из этих параметров, поэтому я использую! И разве ты не должен помогать людям здесь, а не нападать на них?
@ Андрей Мы здесь, чтобы помочь, но и дать совет. Вот то, что дает нам ваш код , между ними уже есть большой промежуток. Таким образом, того, что вы нам дали, недостаточно, чтобы мы могли вам помочь. Пожалуйста, предоставьте достаточный код или рабочий пример
@ZachSaucier Отредактировано - jsfiddle.net/39VDR/1
Ваши !important декларации могут быть просто заменены на более специфичные. input[type="text"].search-text заменит input[type="text"] . jsfiddle.net/39VDR/2 . CSS является каскадным, что означает, что он смотрит на свойства сверху вниз. Объявление width: ... !important; сопровождаемый width ...; глупо, так как вы можете просто поменять порядок и полностью отбросить !important

Andrei · Accepted Answer · 2014-05-09T08-58-00.000Z

Проблема возникает, потому что когда вы увеличиваете масштаб, ваши значения больше не будут целыми. Это означает, что округление будет иметь место, а внешний контейнер (.search) будет на 1px больше, чем вы ожидали.

Вы можете удалить float:right на .search-icon и он будет работать нормально.

Вы можете видеть это здесь:

http://jsfiddle.net/39VDR/4/

.search-icon{
    display: inline-block;
    background-color: #ACB6BE;
    height: 30px;
    width: 31px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 1px solid #acb6be;
    font-size:12px;
    vertical-align: top;
}

Тем не менее, как уже упоминалось, вы можете удалить значение !important если вы просто добавите более специфичность для своих селекторов.