顯示位置：相對兼容性問題

顯示=「位置：相對;」是在IE瀏覽器（瀏覽器模式：IE7/8/9 - 文檔模式：怪癖）但如果我改變文檔模式從怪癖到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>

當我鼠標懸停它顯示：

enter image description here

然而，它應該爲：

enter image description here

來源

2013-04-04 mknayab

請顯示您的代碼。（我問，因爲我看到你迄今爲止發佈的內容有很大的麻煩） – 2013-04-04 07:17:01

@Linus Caldwell，根據要求我更新了示例代碼。 – mknayab 2013-04-04 07:25:26

不應該有某個位置：絕對位置嗎？ '＃right'和'＃text-indent'是什麼？ – 2013-04-04 07:35:26

謝謝大家，它已經解決了;請參閱以下代碼參考。我已經將位置從相對位置改變爲絕對位置，並且設置頂部高度&以修復位置。

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

來源

2013-04-04 09:52:56 mknayab

文檔模式怪癖意味着你基本上運行的是IE6之前的渲染引擎。解決這個問題的一個好的解決方案是在你的HTML文檔的頂部添加一個文檔類型。這會使瀏覽器默認處於標準模式，並允許您的位置：相對;按預期工作。

最簡單的DOCTYPE是HTML5之一：

<!DOCTYPE html>

把這個寫進你的HTML的1號線。沒有辦法通過CSS強制標準模式。

來源

2013-04-04 07:25:11 Hans

如果我添加<！DOCTYPE html>它破壞整個頁面佈局，但解決了這個問題。但是我不能在整個頁面上妥協，所以還有其他解決方法嗎？ – mknayab 2013-04-04 08:21:11

顯示位置：相對兼容性問題

回答

相關問題