Псевдо-теги «before» & «after», border-left не работает в IE

Question

Я хочу создать левую границу на div, но только на 50% от div. Я создал следующий код, который работает во всем, кроме IE. Я запускаю IE11 atm, и я также пробовал другие версии, которые показывают ту же ошибку.

Here is a Fiddle:http://jsfiddle.net/0ffmrxpz/16/

Если убрать "дисплей: стол-клетки" будет работать в IE. Но из-за моего конечного дизайна я не могу удалить или изменить этот экран. Если я это сделаю, я нарушу всю настройку дизайна.

Answer 1

Это известная проблема взаимодействия между Internet Explorer и другими браузерами. На самом деле мы уже начали отправлять изменения в базовый движок, чтобы лучше отобразить этот прецедент.

Ниже бок о бок с Internet Explorer 11, и наш поточную в процессе развития версии на http://remote.modern.ie, также доступны в нашем Windows 10 preview:

Основным виновником здесь является использование display: table-cell; кроме этого, псевдоэлементы, границы и все остальное будут работать, как ожидалось, в Internet Explorer. Это происходит только тогда, когда вы используете свойства, предназначенные для табличных данных, как механизм макета, с которым вы в настоящее время сталкиваетесь с этой проблемой.