IE 8 mouser用css悬停弹出位置

Question

我已经显示了鼠标悬停弹出窗口的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

Answer 1

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

Answer 2

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

Answer 3

需要Z-index at：hover

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; 
}