CSS : Sharepoint에서 마우스를 올리면 Chrome에서 작동하지만 IE8 (또는 7 호환)에서는 작동하지 않습니다.

Question

DataFormWebPart 렌더링 :

<th class="MenuItem"> 
    <xsl:attribute name="onclick" >window.location="<xsl:value-of select="substring-before(@URL, ', ')" ></xsl:value-of>"</xsl:attribute> 
    <xsl:value-of select="@Comments" disable-output-escaping="yes" /> 
</th> 

CSS 사용 :

.MenuItem 
{  
    background-color:aqua; 
    border: thick red solid; 
    border-top: 0; 
    border-bottom: 0; 
    padding:.25em; 
    padding-left:1em; 
    padding-right:1em; 
} 

.MenuItem:hover 
{  
    background-color:green; 
} 

IE에서 : 호버가 무시되고 Chrome이 작동합니다.

위의 간단한 HTML 파일을 만들면 Internet Explorer에서 예상대로 작동합니다.

제 이론은 WSS가 어떻게 든 CSS를 망치고 있다는 것입니다 ....

누구도 뭘 망칠지 추적하는 방법을 알고 있습니다 : 호버 선택기?

Answer 1

the : 모든 브라우저에서 모든 요소에 호버가 허용되지 않습니다. 이 문제를 해결하려면 .menuitem 안에 "a"태그를 넣고 .menuitem a 및 and .menuitem a : hover를 사용하거나 javascript를 사용하여 호버에서 무언가를 수행해야합니다.

쉽게 jQuery의 .hover를 사용할 수 있습니다. 기능을 사용하여 작업을 수행합니다. 많은 이후

Answer 2

브라우저 버전과 SharePoint에서 CSS가 상당히 복잡해졌습니다. 나는 당신의 솔루션이 문제를 해결할 것이라고 생각합니다.

먼저 결과 HTML을보고 CSS 파일이 처리되는 순서를 이해해야합니다. SharePoint는 자체 CSS 클래스를 무시할 수있는 자체 참조를 CSS에 추가합니다. Firebug 및/또는 IE8의 개발자 도구를 사용하여 HTML 요소 및/또는 상위 요소에 적용되는 클래스를 이해하는 것이 좋습니다.

HTML 선언 (strict, transitional)은 충돌이있을 때 특정 요소에 적용 할 클래스를 일부 브라우저가 결정한 방법에 영향을주는 것으로 나타났습니다. 또한 CSS가 충돌하는 CSS가있는 상황에서 브라우저가 어떻게 결정을 내리는 지에 영향을 미치는 몇 가지 CSS 클래스에 SharePoint가 중요하다는 사실을 발견했습니다.

이 정보가 도움이되기를 바랍니다. 나는 대답이 아니라는 것을 알고 있지만 문제를 확인하거나 해결하는 데 도움이 될 것입니다.

Answer 3

IE 6, 7 및 8 (단점 모드 인 경우)은 임의 요소의 CSS : hover 의사 클래스를 지원하지 않습니다. javascript shims to make IE recognize :hover이 있습니다.

Answer 4

단지 몇 요소가 허용 지적 : IE에서 의사를 가져, 여기에 코드가 보일 것이다 방법은 다음과 같습니다 jQuery를 또는 다른 JS 방법으로

<th class="MenuItem"> 
    <a href="#"> 
     <xsl:attribute name="onclick" >window.location="<xsl:value-of select="substring-before(@URL, ', ')" ></xsl:value-of>"; return false;</xsl:attribute> 
     <xsl:value-of select="@Comments" disable-output-escaping="yes" /> 
    </a> 
</th> 

.MenuItem 
{  
    border: thick red solid; 
    border-top: 0; 
    border-bottom: 0; 
} 

.MenuItem a 
{ 
    display: inline-block; 
    padding:.25em; 
    padding-left:1em; 
    padding-right:1em; 
    background-color:aqua; 
} 

.MenuItem a:hover 
{  
    background-color:green; 
} 

, 원래 코드를 유지하는 것, 변화 .MenuItem는 A : .MenuHover 클래스에를 가져과 :

$(document).ready(function() { 
    $(".MenuItem").hover(function() { 
     $(this).addClass("MenuHover"); 
    }, function() { 
     $(this).removeClass("MenuHover"); 
    }); 
});