IE11 растягивается border-image

Question

Я пытаюсь получить границу изображения CSS3 для работы в современных браузерах, и я обнаружил, что IE11 растягивает 1px-слайды изображения, когда они должны быть твердыми.

Это мое тестовое изображение: http://i.imgur.com/bwwYJOS.png - обратите внимание, как центральная область (1px wide) сплошная белизна.

Мой CSS:

div { 
    border-style: solid; 
    border-width: 11px 24px 10px 25px; 

    border-image-source: url(...); 
    border-image-slice: 11 24 10 25 fill; 
    border-image-width: 11px 24px 10px 25px; 
    border-image-outset: 0s; 
    border-image-repeat: stretch; 
} 

регионы этого изображения являются (в 50x50 изображения):

Top-left:  0, 0 to 25,10 (25x11) 
Top-span:  25, 0 to 25,10 (1x11) 
Top-right: 26, 0 to 49,10 (24x11) 
Left-span:  0,11 to 24,39 (25x29) 
Centre:  25,11 to 25,39 (1x29) 
Right-span: 26,11 to 49,39 (24x29) 
Bottom-left: 0,40 to 24,49 (25x10) 
Bottom-span: 25,40 to 25,49 (1x10) 
Bottom-right: 26,40 to 49,49 (24x10) 

Вот JSFiddle: сравнение http://jsfiddle.net/rdgbotke/

Rendering:

Chrome 44:

IE11:

Update Я заметил, что край на Windows 10 делает это идентично Chrome, так что я предполагаю, что это должно быть ошибка в IE11 тогда.

Answer 1

Если это только вопрос цвета или простой графики, которые могут быть извлечены из них, б ackground, background-repeat, background-position и background-size может быть альтернативой.

div { 
 
    padding:12px 25px; 
 
    background: 
 
    linear-gradient(to bottom, #FF0000, #FF0000) 0 0 no-repeat, 
 
    linear-gradient(to top , #B335B2, #B335B2) 0 bottom no-repeat, 
 
    linear-gradient(to top, #00FFD8, #00FFD8) 0 0 no-repeat , 
 
    linear-gradient(to top, #CFBFF3,#CFBFF3) top right no-repeat, 
 
    linear-gradient(to top, #F6D830,#F6D830) bottom right no-repeat, 
 
    linear-gradient(to top, #5C35B3,#5C35B3) top right no-repeat, 
 
    linear-gradient(to top,#0000FF,#0000FF) top no-repeat, 
 
    linear-gradient(to top,#00FF42,#00FF42) bottom no-repeat; 
 
    background-size: 
 
    24px 11px, 
 
    24px 11px, 
 
    24px 100%, 
 
    24px 11px, 
 
    24px 11px, 
 
    24px 100%, 
 
    100% 10px, 
 
    100% 10px; 
 
}

<div> 
 
    <p>blargh</p> 
 
</div>

Box-тень тоже может помочь:

div { 
 
    margin: 20px 24px; 
 
    padding:1px; 
 
    box-shadow: 
 
    0 -11px #0000FF, 
 
    0 11px #00FF42, 
 
    24px 0 #5C35B3, 
 
    -24px 0 #00FFD8, 
 
    -24px -11px #FF0000, 
 
    -24px 11px #B335B2, 
 
    24px 11px #F6D830, 
 
    24px -11px #CFBFF3 
 
}

\t <div> 
 
\t \t <p>blargh</p> 
 
\t </div>