Я включил карту изображений с помощью CSS (как описано в этой довольно старой статье 2004 года в A List Apart ) в размещенную извне страницу фрейма Facebook.Я использую карту изображений с изображениями для: link / a: hover, с CSS, включенным во внешнюю таблицу стилей.Страница отображается правильно в Safari и Chrome, но не в Firefox 3.6 в Mac OS X.
Если я переключаюсь обратно на встроенные стили, страница отображается правильно вFirefox.
Ниже приведен код со встроенными стилями:
<style type="text/css">
#home-page-nav {
width: 512px; height: 139px;
background: url(http://mysite.com/imagemap.jpg);
margin: 10px auto; padding: 0;
position: relative;}
#home-page-nav li {
margin: 0; padding: 0; list-style: none;
position: absolute; top: 0;}
#home-page-nav li, #home-page-nav a {
height: 141px; display: block;}
#blog-icon {left: 0; width: 127px;}
#links-icon {left: 128px; width: 128px;}
#twitter-icon {left: 256px; width: 128px;}
#flickr-icon {left: 384px; width: 128px;}
#blog-icon a:hover {
background: transparent url(http://mysite.com/imagemap.jpg)
0 -139px no-repeat;}
#links-icon a:hover {
background: transparent url(http://mysite.com/imagemap.jpg)
-128px -139px no-repeat;}
#twitter-icon a:hover {
background: transparent url(http://mysite.com/imagemap.jpg)
-256px -139px no-repeat;}
#flickr-icon a:hover {
background: transparent url(http://mysite.com/imagemap.jpg)
-384px -139px no-repeat;}
</style>
<ul id="home-page-nav">
<li id="blog-icon"><a href="http://donaldjenkins.net/"></a></li>
<li id="links-icon"><a href="http://links.donaldjenkins.net/"></a></li>
<li id="twitter-icon"><a href="http://twitter.com/donaldjenkins"></a></li>
<li id="flickr-icon"><a href="http://flickr.com/photos/astorg"></a></li>
</ul>
Любые предложения по решению этого приветствия.
ОБНОВЛЕНИЕ: Решение найдено, спасибоНейлу ниже .На случай, если у кого-то еще есть такая же проблема, вот как это исправить.Решение состоит в том, чтобы обновить конфигурацию веб-сервера, на котором размещен файл CSS.Некоторые веб-серверы Apache и iPlanet связывают файлы, имеющие .CSS, с неверным MIME-типом, таким как «text / plain» или «application / x-pointplus».В некоторых случаях Netscape 7.x и Mozilla игнорируют файл CSS из-за его неправильного типа MIME и используют таблицу стилей по умолчанию, которая приводит к тому, что макет отличается от того, что было задумано веб-разработчиком.Для получения дополнительной информации см. эту страницу в Mozilla Development Network.
Самый простой способ решить эту проблему - включить следующую строку в ваш файл .htaccess:
AddType text/css .css