Css Triangle неправильно рендерится в IE

Question

Css Triangle неправильно рендерится в IE

0

Я пытаюсь создать css trianlge для навигации заголовка. Я достиг этого, но он не правильно отображается в IE.

Вот решение Working Fiddle для образца, который я создал. Я исправил позицию, но когда я пытаюсь запустить IE (в настоящее время у меня есть IE 11.0), треугольник отображается как квадрат, но когда я пытаюсь запустить его в Chrome и FF работает нормально.

Скрипач: http://jsfiddle.net/cKnyQ/20/

a:hover:after {
            background: white;
            border: solid black;
            border-width: 1px 1px 0 0;
            bottom: 0px;
            content: ' ';
            display: block;
            height: 10px;
            left: 32px;
            position: absolute;
            width: 10px;
            z-index: 99;
            -webkit-transform: rotate(-45deg);
            -webkit-transform-origin: 50% 50%;
        }

codebot 06 март 2014, в 09:34

Источник

0

Посмотрите на это: mrcoles.com/blog/callout-box-css-border-triangles-cross-browser
DonJuwe 06 март 2014, в 07:56
0

Я не знаю, что IE поддерживает стили -webkit-transform. (Попробуйте просто «преобразовать»)
DA. 06 март 2014, в 08:10
0

-webkit только для Webkit (Chrome / Safari / Opera15 +). Вы пропустили префиксы других поставщиков, такие как -ms , и стандартное свойство W3C.
Hashem Qolami 06 март 2014, в 08:10
0

jsfiddle.net/cKnyQ/23 работает в IE
Pandiyan Cool 06 март 2014, в 08:12

Показать ещё 2 комментария

Теги:

html

css

internet-explorer

2 ответа

0

Спасибо Akshay mohite. В качестве примечания я редактировал скрипт js с найденным решением.

Скрипт: http://jsfiddle.net/cKnyQ/25/

#Container a:hover::after {
        content: "";
        display: block;
        border: 8px solid black;
        border-bottom-color: white;
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -12px;
        background: white;
    }

codebot 06 март 2014, в 07:21

Ещё вопросы

Посмотрите на это: mrcoles.com/blog/callout-box-css-border-triangles-cross-browser
Я не знаю, что IE поддерживает стили -webkit-transform. (Попробуйте просто «преобразовать»)
-webkit только для Webkit (Chrome / Safari / Opera15 +). Вы пропустили префиксы других поставщиков, такие как -ms , и стандартное свойство W3C.

Akshay Mohite · Accepted Answer · 2014-03-06T05-16-00.000Z

Использовать -ms-transform: rotate(-45deg)

Также укажите другие браузерные префиксы!