显示位置：相对兼容性问题答案

【问题标题】：Display Position: Relative Compatibility Issue显示位置：相对兼容性问题
【发布时间】：2013-04-04 17:52:56
【问题描述】：

Display="位置：相对；"在 IE 中玩杂耍（浏览器模式：IE7/8/9 - 文档模式：Quirks）但是如果我将文档模式从 Quirks 更改为 IE7/8 甚至 9，它工作正常。如何通过CSS设置这个问题？请看下面的示例代码：

CSS

.aFlyOut{
    padding: 10px;
    bottom: 0px;
    border: 1px solid #a6adb3;
    background-color: #FFFFFF;
    position: relative;
    z-index: 9999;  
}

.aFlyoutCollapse
{
    background-image:  url("/vtpOnline/images/settings.png");
    background-repeat: no-repeat;
    background-position: 100% 50%;  
    cursor:pointer;
    width:40px;
    height: 20px;
    text-indent: 21px;
    color: #FFFFFF;
}   

.aFlyoutExpand
{
    background-image:  url("/vtpOnline/images/settings.png");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    cursor:pointer;
    width:40px;
    height: 20px;
    text-indent: 21px;
    color: #FFFFFF;
}

.aFlyoutButton{
    height: 12px;
    float: right;
    width: 38px;
    cursor: hand;
    padding-right: 4px;
}
.aFlyout{
    float: right;
    background-color: #FFFFFF;
    border:1px solid #a5acb2;
    right: 6px;
    #right: 8px;
    padding: 0px;

}
.aFlyoutHeader{
    padding: 4px 6px 3px 0;
    background: url("/vtpOnline/images/actionFlyoutHeaderIcon.gif") #090999 no-repeat;
    color: #FFFFFF;
    text-indent: 23px;
    font-size: 11px;
    font-weight: bold;
}
.aFlyoutLinkWrapper{
    padding:5px;
}
.aFlyoutLinkWrapper a{
    padding: 5px;
    color: #010356;
    font-size: 11px;
    display: block;
    text-decoration: none;
}
.aFlyoutLinkWrapper a:hover{
    color: #0060ff;
    background-color: #f2f2f2;
}
.aFlyoutRefreshLink{
    background: url("/vtpOnline/images/addNote.png") no-repeat 0 50%;
    text-indent: 12px;
    #text-indent: 10px;
}

HTML

<div class="aFlyoutButton" id="aFlyoutLink"> 
  <!-- Action Flyout Action Button -->
  <div class="aFlyoutExpand" title="Actions" id="aFlyoutButton" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()" onClick="aFlyoutExpandCollapse()"> </div>
  <div id="aFlyout" class="aFlyout" style="display: block;" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()"> 
    <!-- Action Flyout Action Header -->
    <div class="aFlyoutHeader" style="color: #FFFFFF;font-size: 11px !important;"> Actions </div>
    <!-- Action Flyout Links Panel -->
    <div class="aFlyoutLinkWrapper" style="width: 100px;"> <a class="aFlyoutRefreshLink" href="#" id="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" name="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" onClick="aFlyoutExpandCollapse();;A4J.AJAX.Submit('j_id_jsp_2094016106_0','j_id_jsp_2094016106_1',event,{'oncomplete':function(request,event,data){Richfaces.showModalPanel('AddNoteModalPanel');setValues();return false;},'similarityGroupingId':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION','parameters':{'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION'} ,'actionUrl':'/vtpOnline/faces/order/edit/default.jsf'} );return false;">Notes</a> </div>
  </div>
</div>

鼠标悬停时显示：

但是，应该是这样的：

【问题讨论】：

请出示您的代码。（我之所以这么问，是因为我发现您迄今为止发布的内容存在很大问题）
@Linus Caldwell，我已按要求更新了示例代码。
不应该有position: absolute 某处吗？ #right 和 #text-indent 是干什么用的？
但是你认为 position: absolute 应该加在哪里？ #right & #text-indent 仅用于对齐目的。
position: absolute 绝对定位一个元素，而top、right 等使用position: relative 设置相对于它的下一个父元素的位置。据我了解，弹出菜单应该有position: absolute 和容器position: relative。并且没有 #right 或 #text-indent 属性。属性不能以 # 开头。

标签： css internet-explorer positioning

【解决方案1】：

文档模式怪癖意味着您实际上是在运行 IE6 之前的渲染引擎。解决这个问题的一个很好的解决方案是在 HTML 文档的顶部添加一个 doctype。默认情况下，这会将浏览器置于标准模式，并允许您的位置：相对；按预期工作。

最简单的文档类型是 HTML5 的：

<!DOCTYPE html>

把它放在 HTML 的第 1 行。无法通过 CSS 强制标准模式。

【讨论】：

如果我添加它会破坏整个页面布局，但修复了这个问题。但是我不能为此在整个页面上妥协，那么还有其他方法吗？

【解决方案2】：

谢谢大家，已解决；请参阅以下代码参考。我已将位置从相对位置更改为绝对位置，并设置顶部和高度来固定位置。

.aFlyOut{
   position: absolute;
   top: 28px;
   height: 70px;
}

【讨论】：