CSS 宽度在 IE8 兼容模式下填写，在正常模式下正常工作答案

【问题标题】：CSS width fills out in IE8 Compatibility mode, works as it should in normal modeCSS 宽度在 IE8 兼容模式下填写，在正常模式下正常工作
【发布时间】：2010-05-10 11:49:31
【问题描述】：

我正在尝试在页面上的图像周围创建边框，边框在 IE8 正常模式下工作正常，但在 IE8 兼容模式下 填充到外部 div 的 100%，我的 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>

【问题讨论】：

标签： css ie8-compatibility-mode

【解决方案1】：

不完全确定我是否了解您想要做什么。但是为什么不尝试在 css 文件中添加边界呢？从 MAINIMAGE.jpg 标记中删除 style="border-width:0px;text-align:top;"

并将其添加到 css 源中的 .page-image-imgright

border: 5px solid #000000;

当我测试这个时，我对 IE 8 中的边界没有任何问题 - 边框只在主图像周围。

如果这能解决问题，请告诉我。

【讨论】：