Firefox에서 이미지 맵을 표시하려면 인라인 CSS가 필요합니까?

외부 호스팅 된 a Facebook iframe page에서 CSS를 사용하는 이미지 맵 (this rather old 2004 article의 A List Apart)을 포함 시켰습니다. CSS 스타일 시트에 포함 된 : link/a : hover에 대한 이미지가 포함 된 이미지 맵을 사용하고 있습니다. Safari 및 Chrome에서는 올바르게 표시되지만 Mac OS X에서는 not in Firefox 3.6이 표시됩니다.Firefox에서 이미지 맵을 표시하려면 인라인 CSS가 필요합니까?

인라인 스타일로 다시 전환하면 Firefox에서 displays properly 페이지가 표시됩니다. 이 환영을 해결하기로

<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가있는 파일을 "text/plain"또는 "application/x-pointplus"와 같은 잘못된 MIME 유형과 연관시킵니다. 경우에 따라 Netscape 7.x 및 Mozilla는 잘못된 MIME 유형으로 인해 CSS 파일을 무시하고 레이아웃을 웹 개발자가 의도 한 것과 다른 모양으로 만드는 기본 스타일 시트를 사용합니다. 자세한 내용은 Mozilla Development Network의 this page을 참조하십시오.

가장 간단한 방법은 그것이 당신의 .htaccess 파일에서 다음 행을 포함하는 것입니다 해결 : 보안 기능으로

AddType text/css .css

출처

2011-02-24 Donald Jenkins

FF로 디버깅을 시작하는 한 가지 방법은 Firebug 플러그인을 다운로드하여 설치하는 것입니다. 이것을 켜고 imagemap 요소를 검사하여 어떤 클래스가 적용되고 있는지, 배경 이미지가 올바르게로드되었는지 확인하십시오. – easwee

방화범에 +1. 네 인생이 바뀔거야. –

을 외부 스타일 시트는 text/css MIME 유형으로 제공되어야 그렇지 않은 경우는 무시됩니다 파이어 폭스.

출처

2011-02-25 21:31:08 Neil

실제로 그 질문에 답합니다. Firefox의 페이지 [지금 완벽로드] (http://www.facebook.com/donaldjenkins.net?sk=app_186821848024009). 감사. 솔루션에 대해 더 자세히 설명하기 위해 질문을 업데이트했습니다. –

@Donald Jenkins 나는 그 링크를 찾고 있었지만 어떤 이유로 그것을 찾을 수 없었다. 네가 찾은 것을 기쁘게 생각한다! – Neil

Firefox에서 이미지 맵을 표시하려면 인라인 CSS가 필요합니까?

답변

관련 문제