Internet Explorer CSS ширина: известково()

https://jsfiddle.net/dm7pxv1k/1/Internet Explorer CSS ширина: известково()

У меня проблема с IE, когда я получил 3 дивы с фона изображения в 1 строке, и каждый имеет width: calc(100%/3);.

Если вы измените размер окна, начнет мигать третье изображение.

Когда вы изменяете размер окна до большого разрешения, например .banner-mini имеет как минимум width:2000px;, тогда третье изображение полностью исчезает.

Я также использовал префиксы браузера - вы можете увидеть в Fiddle.

Есть ли кто-нибудь, пожалуйста, любую идею, как я мог это исправить? Спасибо огромное!

КПП: Другие браузеры в порядке.

источник

2016-06-08 Honzis Novák

См вычисленное значение, которое устанавливает IE. Безусловно, общая ширина трех элементов превышает 100%. –

Маленький и легкий обходной путь для этого является, чтобы уменьшить ширину 1px:

.banner-mini{ 
 
    height: 220px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.banner-mini .box{ 
 
    float: left; 
 
    width: 33%; /** older browsers **/ 
 
    width: -webkit-calc((100%/3) - 1px); /** Safari 6, Chrome 19-25 **/ 
 
    width: -moz-calc((100%/3) - 1px); /** FF 4-15 **/ 
 
    width: calc((100%/3) - 1px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/ 
 
    height: 100%; 
 
} 
 
.banner-mini .fst{ 
 
    background: url(http://s33.postimg.org/q43iabwtr/banner_1.jpg) no-repeat center center; 
 
    background-size: 100%; 
 
} 
 
.banner-mini .snd{ 
 
    background: url(http://s33.postimg.org/tozdtk1db/banner_2.jpg) no-repeat center center; 
 
    background-size: 100%; 
 
} 
 
.banner-mini .trd{ 
 
    background: url(http://s33.postimg.org/lkr9otey7/banner_3.jpg) no-repeat center center; 
 
    background-size: 100%; 
 
}

<div class="banner-mini"> 
 
    <div class="box fst"></div> 
 
    <div class="box snd"></div> 
 
    <div class="box trd"></div> 
 
</div>

источник

2016-06-08 14:07:52

1px заметен (всего 3 пикселя для 3 элементов), чтобы исправить округление IE достаточно, чтобы вычесть 0.01px, который не вызывает никаких видимых артефактов рендеринга , – keaukraine

IE еще несколько хаотично от округления значения.

Рассмотрите возможность calc(99.9%/3), чтобы решить вашу проблему.

источник

2016-06-08 14:08:37 romuleald

IE не имеет очень точное округление (вы можете найти более подробную информацию об этом here), вы должны вычесть некоторые незаметно малое значение из результата, чтобы исправить это:

width: calc(100%/3 - 0.01px);

Живая скрипка: https://jsfiddle.net/keaukraine/L9duvu9q/1/

источник

2016-06-08 14:11:55 keaukraine

Internet Explorer CSS ширина: известково()

ответ

Смежные вопросы