При зуме, в IE11 меняется толщина border, как исправить?

Question

[Megalexandros]

Comments

[Лев Забудкин]

<style>
background-clip: padding-box;
</style>

или попробуйте (2 px поменяйте на свой размер рамки):

<style>
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
</style>

также попробуйте:

<style>
    border-top-right-radius: 2px !important;
    border-top-left-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
</style>

[Lynn «Кофеман»]

А почему она не должна меняться и зачем это исправлять?

[Megalexandros]

Лев Забудкин, Не помогло

[Megalexandros]

Алексей Тен, Такая правка пришла от тестировщика

[Лев Забудкин]

Megalexandros, в смысле не помогло?
Вы хоть применили стиль к тому, где у Вас рамка?
Какой ID у того, у чего рамка?

[Lynn «Кофеман»]

Megalexandros, ну так спросите его

Зум по определению увеличивает всё, в том числе толщину линий. А посколько нарисовать линию толщиной полтора пикселя невозможно, браузер округляет как может.

[Лев Забудкин]

Алексей Тен, !important не даст увеличить

[Megalexandros]

Лев Забудкин, Извиняюсь , там не бордер а box-shadow

[Лев Забудкин]

Megalexandros, ну так это DIV или что? Если у этого элемента ID? Например:
<div id="моё_имя">lalala</div>
или может класс?
<div class="мой_класс">lalala</div>

Делается просто:

<style>
.мой_класс {
 -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
#моё_имя {
 -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
</style>

[Lynn «Кофеман»]

Лев Забудкин, даст конечно

[Максим]

Megalexandros, а вообще не хотите код показать ?

[Megalexandros]

Лев Забудкин, Это div::before

[Megalexandros]

Максим Ленский,

content: '';
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    height: calc(100% + 3px);
    width: calc(100% + 3px);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: inherit;
    -webkit-box-shadow: inset 0 0 0 2px #009eda, 0 13px 18px rgba(224, 235, 238, .75);
    box-shadow: inset 0 0 0 3px #009eda, 0 13px 18px rgba(224, 235, 238, .75);
    z-index: 3

[Лев Забудкин]

Megalexandros,
ну так уберите строки box-shadow и -webkit-box-shadow
а лучше замените на:

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;

[Максим]

Megalexandros, а при каком событие происходит это увеличение ?

[Megalexandros]

Максим Ленский, наоборот , уменьшение. при зуме 90% и ниже , на IE

[Megalexandros]

Лев Забудкин, .compare__best::before {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

убирается рамка совсем , а надо что бы она не уменьшалась при зуме , точнее не менялась толщина.

[Лев Забудкин]

Megalexandros, да пожалуйста:

content: '';
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    height: calc(100% + 3px);
    width: calc(100% + 3px);
    -webkit-transform: translateY(-50%) ;
    transform: translateY(-50%);
    border-radius: 3px !important;
    -webkit-box-shadow: inset 0 0 0 2px #009eda, 0 13px 18px rgba(224, 235, 238, .75) !important;
    box-shadow: inset 0 0 0 3px #009eda, 0 13px 18px rgba(224, 235, 238, .75) !important;
    z-index: 3

[Максим]

Megalexandros, ну с одной стороны это же логично бы зумите - значит должно уменьшится ...а какое поведение на других браузерах ?

[Лев Забудкин]

Максим Ленский, при !important ничего не будет меняться. См. выше я ему написал.

[Megalexandros]

Максим Ленский, Все отлично

[Максим]

Megalexandros, друг, что бы увидеть и помочь а не гадать на кофейной гуще нужен весь код: html css и поместите его в codepen.io/pen или jsfiddle.net - так и только так

[Megalexandros]

Лев Забудкин, Не помогло , все ровно при зуме 90% - 85% боковые линии уменьшаются

[Megalexandros]

Максим Ленский, Помог такой код , стили применял конкретно к IE , через медиа :

border-radius: 0px !important;
    -webkit-box-shadow: inset 0 0 0 2px #009eda!important;
    box-shadow: inset 0 0 0 2px #009eda  !important;
    z-index: 3

[Megalexandros]

Максим Ленский, А сталкивался с тем , что на 75% размывается немного? Как исправить , не в курсе?

[Максим]

Megalexandros, не видя код я не могу говорить как исправить

[Лев Забудкин]

Megalexandros, что я Вам выше и писал!
Завершайте вопрос уже, решено же.

[Megalexandros]

Лев Забудкин, Напишите его в ответах , а не комментариях

Answer 1

[Лев Забудкин]

Megalexandros, да пожалуйста:

content: '';
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    height: calc(100% + 3px);
    width: calc(100% + 3px);
    -webkit-transform: translateY(-50%) ;
    transform: translateY(-50%);
    border-radius: 3px !important;
    -webkit-box-shadow: inset 0 0 0 2px #009eda, 0 13px 18px rgba(224, 235, 238, .75) !important;
    box-shadow: inset 0 0 0 3px #009eda, 0 13px 18px rgba(224, 235, 238, .75) !important;
    z-index: 3