Ширина CSS заполняется в режиме совместимости IE8, работает так, как должно в нормальном режиме

Question

Я пытаюсь создать границу вокруг изображения на странице, и граница отлично работает в режиме IE8 Normal, но заполняется до 100% внешнего DIV в режиме совместимости с IE8, мой CSS заключается в следующем:

.page-layout .page-header .page-image 
{ 
    float:left; 
    vertical-align:top; 
    width:170px; 
} 

.page-layout .page-header .page-image div, 
.page-layout .page-header .page-image img 
{ 
    float:left; 
} 

.page-image-imgtop 
{ 
    background-image:url('/Style Library/images/pagecontent-image-top-bg.png'); 
    background-repeat:repeat-x; 
    height:6px; 
    float:left; 
    clear:both; 
    width:100%; 
} 

.page-image-imgleft 
{ 
    background-image:url('/Style Library/images/pagecontent-image-bg-left.png'); 
    background-repeat:repeat-y; 
    float:left; 
    text-align:right; 
    clear:both; 
} 

.page-image-imgright 
{ 
    margin-left:7px; 
    padding-right:8px; 
    background-image:url('/Style Library/images/pagecontent-image-bg-right.png'); 
    background-repeat:repeat-y; 
    background-position:top right; 
    float:left; 
    clear:both; 
} 

.page-image-imgbottom 
{ 
    background-image:url('/Style Library/images/pagecontent-image-bottom-bg.png'); 
    background-repeat:repeat-x; 
    height:6px; 
    float:left; 
    clear:both; 
    width:100%; 
} 

И следующий HTML:

<div class="page-image"> 
<div class="page-image-imgleft"> 
    <div class="page-image-imgtop"> 
     <img src="/Style Library/images/pagecontent-image-top-left.png" style="float:left;" /> 
     <img src="/Style Library/images/pagecontent-image-top-right.png" style="float:right" /> 
    </div> 
    <div class="page-image-imgright"> 
    <img src="MAINIMAGE.jpg" style="border-width:0px;text-align:top;" /> 
    </div> 
    <div class="page-image-imgbottom"> 
     <img src="/Style Library/images/pagecontent-image-bottom-left.png" style="float:left;" /> 
     <img src="/Style Library/images/pagecontent-image-bottom-right.png" style="float:right" /> 
    </div> 
</div> 
</div> 

Answer 1

Не совсем уверен, если я понимаю, что вы хотите сделать. Но почему бы не попытаться добавить границу в файл css? Удалить style="border-width:0px;text-align:top;" из MAINIMAGE.jpg тега

и добавить к .стр-образ-imgright в источнике Css

border: 5px solid #000000; 

У меня не было никакой проблемы с границы в IE 8, когда я тестировал это - граница была только вокруг основного изображения.

Дайте мне знать, если это решит проблему.