IE11, не отображающий CSS правильно

Chrome и Opera отображают мою страницу правильно без проблем, однако IE11 и Edge этого не делают.IE11, не отображающий CSS правильно

Я использую чистый CSS, чтобы развернуть/свернуть 3 заголовка раздела. Это было мое понимание. IE 11 больше поддерживал CSS3/webkit, и я определенно думал, что Edge усилит его игру.

https://jsfiddle.net/x0c5fsqh/

CSS Сниппет

summary::-webkit-details-marker { 
    background: url(/images/toggle-expand.png) center no-repeat; 
    color: transparent; 
    font-size: 125%; 
    margin-right: 2px; 
} 
details[open] summary::-webkit-details-marker { 
    background: url(/images/toggle.png) center no-repeat; 
    color: transparent; 
} 
summary:focus { 
    outline-style: none; 
} 
article > details > summary { 
    font-size: 28px; 
    margin-top: 16px; 
} 
details > p { 
    margin-left: 24px; 
} 
details details { 
    margin-left: 36px; 
} 
details details summary { 
    font-size: 16px; 
}

визуализироваться

Как IE/Край делает его

Все заголовки перекрываться с содержанием предыдущих разделов, которые должны быть скрыты и рычажные изображения не появляются вообще. Просто похоже, что приведенный выше CSS полностью игнорируется.

Любые идеи?

источник

2016-09-30 Samuel Nicholson

IE не знает -webkit-details-marker https://webdesign.tutsplus.com/tutorials/explaining-the-details-and-summary-elements--cms-21999 – Lidaranis

Пожалуйста, предоставьте [Минимальный, Полный , и проверяемый пример] (http://stackoverflow.com/help/mcve). – hungerstar

@hungerstar вы имеете в виду вот так: https://jsfiddle.net/x0c5fsqh/ –

Из того, что я могу видеть, в IE и Edge не поддерживаются элементы <details> и <summary>. Это не имеет никакого отношения к поддержке функций CSS3. Похоже, что эти элементы являются частью спецификации HTML5.1.

Код: MDN, WebPlatform, caniuse.com.

Посмотрите на Ресурсы tab на caniuse.com. Есть несколько ссылок, указывающих на некоторые полисы.

Как отмечали другие, свойства CSS с префиксом -webkit- не будут работать в IE/Edge. Точно так же, как -o- или -ms- не будет работать в Chrome.

источник

2016-09-30 12:54:20 hungerstar

IE11, не отображающий CSS правильно

ответ

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