Условные комментарии для IE > 9

[PavelTkachev]

Столкнулся с тем, что вот такая конструкция не работает в Internet Explorer старше 9 версии:

        <!--[if IE]>        <style>            span{                background:red;            }            </style>        <![endif]-->   

Как сделать стиль срабатывающий и для старших версий Internet Explorer?

 

[wwt]

IE 10+ не поддерживают условные комментарии насколько я помню. Используйте js для определения версии, или хаки.

 

https://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

 

 

Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode.

[antonKar]

Support for conditional comments has been removed in Internet Explorer 10

[PavelTkachev]

 

IE 10+ не поддерживают условные комментарии насколько я помню. Используйте js для определения версии, или хаки.

 

https://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

 

 

Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode.

 

 

 

И какой хак тут применить?

            span{                cursor:pointer;                padding:0 20px;                border-radius:10px 0 0 10px;                width:100px;                display:inline-block;                text-align:center;                position: relative;                text-decoration:none;                background:#009944;            }            span:hover{                background:#ebb453;            }            span:hover::after{                border-left:15px solid #ebb453;            }            span::after{                content:'';                position:absolute;                right:-30px;                bottom:0;                border:15px solid transparent;                border-left:15px solid #009944;            }

Между span и after в IE прозрачная полоса в 1px. В других браузерах фон без разрыва.

[tt48]

position: absolute; должна быть указана высота, либо еще и top.

Если верно помню спеку.

..ща пойду искать..

Печаль.. http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#comp-abspos чтот не видно

Походу ошибся, но попробовать никто не мешает

 

ЗЫ: У меня и в opera есть промежуток..

http://beavers-net.narod.ru/primers/probe_spanafter.html

И в  хроме.

Сделать rigth:-29px; вместо 30, да и все.

Edited July 6, 2015 by tt48

[PavelTkachev]

Тогда ступенька в 1 px.

[wwt]

width:0; и height:0; для :after попробуйте прписать. У меня к сожалению нет 10-11 версии IE на данный момент, не могу посмотреть.

[PavelTkachev]

Не помогает

[wwt]

Ну как последнее предположение пропишите у after

display: block; 

может IE для родителя с inline-block выставляет псевдоэлементу inline

 

PS я всегда его пишу не полагаясь на то что выставит браузер. Просто есть вот такие ограничения:

 

 

Для :after характерны следующие особенности.

• При добавлении :after к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.
• При добавлении :after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.

 

Возможно IE10+ воспринимает родителя как inline.

[PavelTkachev]

Тоже не помогает.

 

Спасибо, что пытались помочь. Буду надеяться, что другие не будут видеть этот порог в 1px, в отличие от меня.

[wwt]

Тоже не помогает. Спасибо, что пытались помочь. Буду надеяться, что другие не будут видеть этот порог в 1px, в отличие от меня.

 

Да не за что. Как доберусь до компа с 10+ IE посмотрю ещё =) Не раньше вечера.

[SelenIT]

Можно юзать почти стандартный прием «нужный селектор через запятую с селектором, понятным только целевому браузеру», например,

 

.my-selector, #fake-ID-to-hack-IE::-ms-track {

   /* нужные стили только для IE10+ */

}

[wwt]

Вы указали border-radius, но не указали border. Отсюда и линия =)

 

Уберите border-radius и полоса чудным образом пропадет .