Question

我遇到了SharePoint和CSS的问题。我正在创建一个页面，其中包含一个具有悬停效果的简单图像选项卡。它完全用CSS完成。这是CSS片段（托管在单独的CSS文件中）：

div.activelayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }

div.activelayer:hover { 
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left; 
            }           

div.inactivelayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }           

div.selectedlayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }       

div.selectedlayer:hover {   
    background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");   
    cursor: text;
            }   

#innertab .alink {
                margin-top:18px;
                text-align:center;
                margin-left:0px;
}   

#innertab a.tablink {
                color: #ffffff;
                text-align: center;
}   

#innertab a.tablink:hover {
                text-decoration: none;
                color: #ffffff; 
                text-align: center;         
}   


/* IDs */

#menu1 {
    z-index:10;
    }
#menu2 {
    z-index:9;
    }
#menu3 {
    z-index:8;
    }
#menu4 {
    z-index:7;
    }
#menu5 {
    z-index:6;
    }

在aspx页面中，我有这个：

        <div id="innerTab" class="" style="width: 1000px; height: 72px;">
                    <div id="menu1" class="selectedlayer" style="margin-left:0px">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem1">Menu Item 1</a>
                      </div>
                    </div>
                    <div id="menu2" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem2">Menu Item 2</a>
                      </div>
                    </div>
                    <div id="menu3" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem3">Menu Item 3</a>
                      </div>
                    </div>
                    <div id="menu4" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem4">Menu Item 4</a>
                      </div>
                    </div>
                    <div id="menu5" class="inactivelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem5">Menu Item 5</a>
                      </div>
                    </div>              
        </div>

我遇到的问题是：当我在IE中查看时将它放在SharePoint中时它不起作用。

我首先在普通的HTML页面中测试了这段代码，它在IE中就像一个魅力。当我在SharePoint中传输代码（它在页面模板中）时，它不起作用。所以，我在Chrome中查看了SharePoint测试页面，它在那里工作，但出于一些真正奇怪的原因，它不适用于IE。我没有在其他浏览器中测试过，我真的没有计划，因为我正在处理的页面是一个内部网站点，我们公司使用IE（官方说，虽然我们有些人坚持使用Chrome或FireFox因此，IE兼容性是我唯一的优先事项。

我在代码中遗漏了什么吗？请帮忙:(

哦，顺便说一句，我在MOSS2007编码，HTML代码正在页面模板中使用。我的IE版本是IE8。不确定这些信息是否与我遇到的问题有关：（

感谢，

POCH

Answer 1

Sharepoint的样式表覆盖了你的样式表，所以你必须让你的选择器更强大。打开开发人员工具（点击f12），在右侧窗格上方选择“跟踪样式”。选择没有应用它的样式的元素并检查谁的样式。然后只需复制该选择器，使你的选择器更强一些。例如，您可能会看到：

margin-top: 0px;
<击> #innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px

您只需将选择器更改为：

.someClass .someOtherClass #someId #innertab a.alink

您的选择器现在更强大并将被应用。

Answer 2

尝试添加！important，如下：

div.activelayer {
                margin-left:-30px!important;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
                text-align:center!important;
                height:55px!important;
                width:200px!important;
                display:inline-block!important;
                position:relative!important;
                float:left!important;
            }

Answer 3

几个星期前我遇到了类似的问题。我找不到确切的资源，但通过反复试验，我发现我只能将CSS Psuedo类（如:hover和:active）应用于<a>在IE中浏览时，SharePoint中的标记。您在上面发布的代码在:hover代码上有:active / <div>。

我能够使用image sprites获得一个有效的解决方案，设置锚标签的样式，并使用以下HTML和CSS将图像精灵嵌套在<a>标签中：

<强> HTML

<ul id="wheel" class="wheel"><li>
<a href="#"><img src="images1/design.png"></a></li>
</ul>

<强> CSS

.wheel li a, .wheel li a:visited{
  width: 50px;
  height: 50px;
  overflow: hidden; 
}

.wheel li img
{
      position: relative;
      display: block;
}

.wheel a:hover img{
      left: -51px;
}

.wheel a:active img{
      left: -102px;
}

关于你没有解决这个问题的机会，希望这有帮助！

CSS悬停代码神秘地在SharePoint页面中不起作用

3 个答案: