显示="位置:相对;" 在 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>
当我将鼠标悬停时,它显示:
但是,它应该是: