在 IE 8 中将浮动设置为右侧时，CSS div 宽度变为 100%，但在 Firefox 和 Chrome 中工作正常

Question

这是我在 IE 8 上的 CSS 问题。

我有一个父 div 和 2 个子 div。我希望父级 div 的宽度根据内部子级 div 的宽度而增加。它在 Firefox 中运行良好，但在 IE8 中，当我为该 div 的内部元素设置 float:right 时，第一个子 div 的宽度将变为整个页面宽度。

我的 HTML 标记

<div class="divPageContainer">   
    <div id="pnlOrderOptions" class="pnlOrderOptions">      
        <div class="divOrderOptions">      
            some content           
        </div>    
    </div>
    <div class="divOrderDetails" id="pnlOrderDetails">
        <div style="height:20px;width:800px;border:3px solid red;padding:2px;">this width of this red box can be vary from 100 to 1000</div>
    </div>
</div>

和 CSS

.divPageContainer  
 { width:auto; 
   float:left; 
   margin-left:8px;
   height:auto;
   border:1px solid black;
 }
 .pnlOrderOptions 
 {
   min-height:10px; 
   height:auto;
   overflow:auto;
   margin-top:30px; 
   border:1px solid orange;
   width:auto;
 }
 .divOrderOptions 
  {
    margin-left:7px; 
    font-family:Verdana;
    font-size:12px; 
    width:400px; min-height:10px;height:auto;
    border:1px solid #858A8D;
    float:right; padding:5px;
    background-color:#F0F6F8;
  }
  .divOrderDetails 
  { 
    float:left; 
    margin-top:4px;padding:3px;
    border:2px solid blue;
    min-height:10px;height:auto;
  }

在 Firefox 中运行良好；这是：

在 IE 中我得到了（我将红色边框 div 宽度从 800 减少到 400 以获得一张很好的快照，因为我的显示器很宽）

我注意到的一件事是，当我部署这个时出现了这个问题作为 Intranet Web 应用程序。它在本地开发机器上运行良好。我记得以前我们把站点部署到内网时，会出现一些IE7兼容性问题。

我正在寻找的最终结果是内容为“somecontent”的div，这里应该是最右侧（不是页面，而是基于第二个div的宽度，它会动态变化），即它的行为应该像我的Firefox屏幕截图。

Answer 1

float right 是 IE 和 FX 2。

您可以使用 display:inline-block; 代替吗？有一种方法可以让它在 非 - IE 的内联元素。

编辑：您必须在 inline-block 的父级上设置 text-align:right 。

编辑#2：这是我正在讨论的修复示例： http://work.arounds .org/sandbox/64/run

如果这不是您需要的或者它不适合您，请告诉我。