<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<title>demo</title>
<!-- CSS Stylesheet -->
<style type="text/css">
body{
background: #FFFFFF;
font: 12px verdana, simsun,tahoma,geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 10px 10px 10px;
padding: 0px;
}
<!--弹出框-->
.detail{
background-image:url('1.jpg');
width: 250px;
height: 120px;
border: 1px solid #f0f0f0;
position: absolute;
top: 100px;
left: 100px;
background: #f0f0f0;
opacity: .95;
padding: 5px;
font-size: 14px;
-webkit-box-shadow: 4px 4px 5px 0 rgba(50,50,50,.27);
-moz-box-shadow: 4px 4px 5px 0 rgba(50,50,50,.27);
box-shadow: 4px 4px 5px 0 rgba(50,50,50,.27);
}
.detail .scale1{
-webkit-transform: scale(.6666666666666667);
-ms-transform: scale(.6666666666666667);
-moz-transform: scale(.6666666666666667);
}
.detail .point{
top: 130px;
width: 0;
height: 0;
border-top: 18px solid #f0f0f0;
border-right: 17px solid transparent;
margin-top: 0;
margin-left: -6px;
float: left;
position: absolute;
display:block;
}
.pop-text {
clear: both;
display: block;
}
.room-closed {
display: block;
color: #2F2C2C;
}
</style>
</head>
<body>
<div align="center">
<div>
<img src="psd.jpg" border="0" />
</div>
<div class="detail" >
<div class="scale1" style="left: 282.05px; top: 89.5px; transform-origin: left bottom 0px; display:block;">
<span class="pop-text">Room 24</span>
<span class="pop-text">Living and Dying</span>
<span class="pop-text">The Wellcome Trust Gallery</span>
<span class="pop-text">Themes</span>
<span class="room-closed"></span>
<span class="pop-room-link">
<a href="#">More about gallery ›</a>
</span>
<div class="point">
</div>
</div>
</div>
</div>
</body>
</html>
实在想不通啊 我用火狐的F12控制台的时候点到这个div并不会跳出css样式,可是下面的子div都是正常显示的