IE не применяет стили из таблицы стилей

Добрый день, каждый. У меня странная проблема с IE. IE правильно загружает мои таблицы стилей, но не применяет стили к определенной группе псевдоселекторов.IE не применяет стили из таблицы стилей

Я использую Фонд и шрифт значка (icomoon), который загружается из одной таблицы стилей и имеет стили, применяемые к ним от другого. Chrome/Safari/Firefox все правильно применяют стили к классу: перед элементами. Однако IE не поддерживает. Используя инструменты F12, я вижу, что таблица стилей правильно загружается и проверена с помощью Fiddler.

CSS-который не применяется в:

.icon-bookmarks:before, .icon-blog:before, .icon-bullhorn:before, .icon-info2:before, .icon-lab:before, .icon-bookmarks2:before, .icon-bullhorn2:before, .icon-mail:before, .icon-blog2:before, .icon-graduation:before, .icon-user:before, .icon-users2:before { 
color: #fff; 
font-size: 6rem; 
position: absolute; 
top: 2.5rem; 
left: 38%; 
left: calc(50% - 5.5rem); 
border: 5px solid white; 
padding: 2.5rem; 
margin-top: 2.5rem; 
border-radius: 50%; } 

.icon-bullhorn:before, .icon-info2:before, .icon-lab:before, .icon-bookmarks2:before, .icon-mail:before, .icon-blog2:before, .icon-facebook:before, .icon-twitter:before, .icon-linkedin:before, .icon-graduation:before, .icon-user:before, .icon-users2:before { 
color: #3e729a; 
border-color: #3e729a; 
margin-top: 0; }

HTML, является:

<div id="featured" class="ss-style-triangles"> 
    <div class="icon-bookmarks row"> 
     <h1 class="white">Featured Event</h1> 
     <!--Content Stripped--> 
    </div> 
</div>

Глава документа называет ссылки следующим образом:

<head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <meta name="description" content="#"> 
     <meta name="keywords" content="#"> 
     <title>CCIP - CCC | Home</title> 
     <link rel="stylesheet" href="./css/normalize.css" /> 
     <link rel="stylesheet" href="./css/foundation.min.css" /> 
     <link rel="stylesheet" href="./icomoon/style.css" /> 
     <link rel="stylesheet" href="./foundation-icons/foundation-icons.css" /> 
     <link rel="stylesheet" href="./slick/slick.css"/> 
     <link rel="stylesheet" href="./css/style.css" /> 
     <script src="./js/vendor/modernizr.js"></script> 
    </head>

ссылку на сайт разработки: here

Я знаю, что это, вероятно, что-то простое, что я пропускаю, но я могу найти его для жизни. Любая помощь приветствуется, и я могу предоставить дополнительную информацию, если это необходимо.

Заранее спасибо.

источник

2014-11-07 djlotus

В какой версии IE мы говорим? –

Добавьте 'display: inline-block' в свойствах CSS, в которых вы используете': before'. – wf4

@SurrealDreams: все версии. В настоящее время я отлаживаю IE11. – djlotus

При использовании :before вы фактически не вставляете ничего в DOM, а вместо этого используете CSS для создания этого дополнительного контента на странице. В настоящее время вы используете position: absolute;, но у вас нет ширины, высоты нет, и по умолчанию любой псевдоконтент будет потоковым.

Чтобы исправить вашу страницу, добавьте display:inline-block в свойствах CSS, в которых вы используете :before. Это позволит псевдоэлементам вести себя как элементы уровня блока, и они будут работать так, как вы ожидаете.

например.

.icon-bookmarks:before, .icon-blog:before, .icon-bullhorn:before, .icon-info2:before, .icon-lab:before, .icon-bookmarks2:before, .icon-bullhorn2:before, .icon-mail:before, .icon-blog2:before, .icon-graduation:before, .icon-user:before, .icon-users2:before { 
color: #fff; 
font-size: 6rem; 
position: absolute; 
top: 2.5rem; 
display:inline-block; /* <-- add this */ 
left: 38%; 
left: calc(50% - 5.5rem); 
border: 5px solid white; 
padding: 2.5rem; 
margin-top: 2.5rem; 
border-radius: 50%; }

источник

2014-11-10 09:49:30 wf4

Я не должен удивляться, что это только проблема с IE. Спасибо за подробное объяснение. – djlotus

IE не применяет стили из таблицы стилей

ответ

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