CSS не ссылается на HTML в IE 7 и IE 8 - PullRequest
Новая
       13

CSS не ссылается на HTML в IE 7 и IE 8

2 голосов
/ 18 февраля 2012

Я создаю адаптивный веб-сайт, используя несколько таблиц. Все отлично работает в IE 9, Firefox и Safari, но когда я просматриваю сайт в IE 8 или ниже, стили исчезают.

Вы можете просмотреть сайт по адресу http://stevepolitodesign.comlu.com/ (я размещаю его бесплатно для отладки, поэтому он может периодически отключаться)

Вот HTML 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Steve Polito Design</title>

<!-- CSS -->
<link href="css/wide.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1501px)" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen and (min-width: 801px) and (max-width: 1500px)" />
<link href="css/medium.css" rel="stylesheet" media="screen and (min-width: 401px) and (max-width: 800px)" />
<link href="css/narrow.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 400px)" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="css/iphone.css"/>
<link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"  media="screen"/>


<!-- @font-face -->
<link href="fonts/@font-face.css" rel="stylesheet" type="text/css" />

<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/site.js"></script>


</head>

1 Ответ

0 голосов
/ 18 февраля 2012

Атрибут media является частью CSS3 и поэтому не поддерживается IE 6/7/8.См. Эту статью, http://nicolasgallagher.com/mobile-first-css-sass-and-ie/, для получения дополнительной информации об этом.

Быстрое решение - добавить несколько строк, которые ссылаются на файлы CSS, которые скрыты для всех, кроме IE6-8. 

<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="/css/style.css">
<!--<![endif]-->
...