0

我在这里无能为力并寻求帮助。我有一个使用一些自制 JavaScript CEWP 和自定义 CSS 文件的 SharePoint 2007 页面。当我在 IE10 中打开页面并使用开发者工具将其推回 IE7 时,格式看起来类似于 IE10。但是当我在我设置的虚拟机上的实际 IE7 中打开相同的页面时,样式不会显示。我一直小心使用自定义 ID 和类,我的规则指向它们,但我似乎无法让浏览器移动。(这似乎与这里描述的情况相似:为什么我的页面在 IE9 的 IE7 模式下工作,但在 IE7 本身却不行?

真正奇怪的是,我在自定义 CSS 中定义的背景图像确实显示了,但是当我将任何规则添加到 CSS 文件的同一区域时,似乎没有其他规则起作用。

我会说实际 IE7 中的页面外观与我在 IE10 的 IE5 Quirks 模式下查看时的页面外观相似。浏览器是否强制页面进入怪癖视图?如果是这样,我该如何防止这种情况发生?我所做的唯一母版页修改是使用“x-ua-compatible”技巧。

这是规则;它们在 IE10 > IE7 中运行良好,但在实际 IE7 中却不行:

.ms-quicklaunch {
    display:none;
}

.ms-navframe {
    display: none;
}

.tooltip {
    display: none;
}

.ms-bodyareaframe {
    background-image: url('/mypath/images/dkGrey.jpg');
    background-repeat: repeat;
}

#MSOZoneCell_WebPartWPQ3 table tbody tr td[vAlign] {
    font-family: Arial;
    color: white;
    text-align: center;
}

#allPriorities p:first-child {
    font-family: Arial;
    font-weight: bold;
    font-size: 50px;
}

#allPriorities #prioritiesWrapper {
    margin: 0 auto;
}

.priority .img {
    float: left;
    margin: 0 15px 0 0;
}

#allPriorities #prioritiesWrapper .priority .title {
    margin: auto 0;
}

#allPriorities .priority {
width: 350px;
vertical-align: middle;
display: inline-block;
margin: 10px 30px;
padding: 15px;
background-color: black;
text-align: left;
font-weight: bold;
border: 1px solid white;
line-height: 2em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px black, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
}

#programs {
    width: 100%;
margin: 0 auto;
padding: 15px;
}

.program {
    padding: 0 10px;
display: inline-block;
vertical-align: middle;
text-align: left;
height: 200px;
margin: 20px 10px;
width: 30%;
overflow: auto;
border: 1px solid black;
color: black;
background-color: darkgray;
}

.program p {
    font-weight: bold;
padding: 0 0 5px 5px;
border-bottom: 1px solid black;
margin: 10px 0 5px;
}

.program  .programItem {
    height: 25px;
    margin: 0 0 15px 0;
}

.program .programItem .img {
    float: left;
    margin: 0 10px 0 0;
}

.program .linkItem {
    height: 15px;
    margin: 0 0 5px 0;
}

.program .programItem .title {
    margin: auto 0;
}
4

0 回答 0