css - IE10 の IE7 エミュレーターではカスタム CSS が表示されるが、実際の IE7 では表示されない

Question

私はここで機知に富んでいて、助けを求めています。自家製の 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;
}