IE 8鼠标悬停弹出位置与css答案

【问题标题】：IE 8 mouser hover popup position with cssIE 8鼠标悬停弹出位置与css
【发布时间】：2011-12-30 09:32:20
【问题描述】：

我已经让 css 显示鼠标悬停弹出窗口。

FireFox、Crome 看起来不错，但 IE 8 似乎有问题 CSS

span[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    padding: 4px 8px;
    color: #333;
    position: absolute;
    left: 0;
    top: 50;
    z-index: 200;
    width: 100%;    
    border-radius: 5px;
    box-shadow: 0px 0px 4px #222;
    font-weight: normal;
    background-color: #eeeeee;
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -ms-border-radius: 5px;
    -ms-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    -webkit-border-radius: 5px;
    <!--    white-space: nowrap; -->
}


span[data-tooltip]:hover {
    font-weight: bold;
    position: relative;
}

HTML

<span id="OverviewPointTypesSummary" data-tooltip="AFM Air Velocity, AFM Differential Pressure, Air Velocity Module, Central Proportioner, Chlorine, Cryo Freezer Temperature, Differential Pressure, Distribution Pump, Door, Drain Flush Solenoid, Fan, Flow Switch, Freezer Temperature, Generic Humidity, Generic Temperature, Incubator CO2, Incubator Humidity, Incubator O2, Incubator Temperature, Lights, Log Space Available, Machine, Membrane Flush Solenoid, Modem Status, PH, PRS Flow, PRS HP Solenoid, PRS Pressure, Pressure Switch, RO Machine, Rack Solenoid, Refrigerator Temperature, Relay Contact, Room CO2, Room Humidity, Room O2, Room Solenoid, Room Temperature, Storage Tank, Ultra-Low Freezer Temperature, Vent Rack, Waste Flush Solenoid, Water Pressure">AFM Air Velocity, AFM Differential Pressure, Air Velocity Module, Central Proportioner, Chlorine, Cryo Freezer Temperature, Differential Pressure, Distribution Pump, Door, Drain Flush Solenoid, F...</span>

火狐 克罗姆 IE8

【问题讨论】：

确保它们的父标签设置为 position:relative，同时设置绝对宽度而不是相对 (100%)，因为 ie 在绝对定位时不能很好地处理相对宽度

标签： html css styles

【解决方案1】：

您可以在此处查看工作示例： http://jsfiddle.net/Bejrg/4/

【讨论】：

【解决方案2】：

你有top: 50。试试top: 50px

【讨论】：

在 IE8 中没有什么不同

【解决方案3】：

在 :hover 也需要 Z-index

span[data-tooltip]:hover:after {
    z-index: 999;
    padding-bottom: 4px;
    content: attr(data-tooltip);
    background-color: #eeeeee;
    padding-left: 10px;
    padding: 4px;
    padding-right: 10px;
    color: #333;
    padding-top: 10px;
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    -moz-border-radius: 4px;
    border-radius: 5px;
    float: left;
    width:500px; 
    top: 50px;
    left: 50px;
    position: absolute;
    /* display: block;
    overflow: hidden;
    font-weight: normal;
    TEXT-DECORATION: none
    */ 

}

span[data-tooltip]:hover {
    font-weight: normal;
    position: relative;
    z-index: 1; 
}

【讨论】：