我正在使用 SimpleModal 1.4.2。在 FF 和 Safari 中，可以单击角落的“X”关闭对话框，但在 IE 7、8 和 9 中，“X”无效。令人沮丧的是，我在另一个网站上使用了 SimpleModal，它在所有浏览器上都能完美运行，这让我相信我的 css 中有一些东西把它搞砸了。
我尝试在代码中消除不同的 .div 以查看是否可以缩小问题的原因，但无济于事。另一双眼睛和专业知识将不胜感激！这是我的 CSS 代码：
* {
margin: 0;
}
html {
width: 100%;
background-image:url(../images/bg-pixel.jpg);
background-repeat: repeat;
height: 100%;
z-index: -5;
}
body {
background-image:url(../images/vert-gradient.jpg);
background-repeat: repeat-x;
min-width: 900px;
min-height: 775px;
width: 100%;
height: 100%;
z-index: -4;
position: relative;
}
#DDLogo {
padding-top: 104px;
height:530px;
margin-left: 25px;
position: relative;
}
#headWrapper {
height:86px;
width:100%;
margin: 0 auto;
position: absolute;
}
.pageTitle {
padding-top: 48px;
height: 38px;
position: absolute;
float: right;
display: inline;
right: 30px;
width: 400px;
}
.logo {
padding-top: 0px;
width: 252px;
float: left;
height: 86px;
position: absolute;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1.7em;
position: relative;
overflow-y: hidden;
}
.DDrawing {
width:100%;
height: auto !important;
height: 100%;
background-image: url(../images/davinci-drawing.jpg);
background-repeat:repeat-x;
filter: alpha(opacity=5);
-moz-opacity: 0.05;
-khtml-opacity: 0.05;
opacity: 0.05;
z-index: -1;
position:absolute;
overflow:hidden;
}
img {
border: none;
}
/* Content Pages */
#ContentArea {
width: 1200px;
height: 405px;
margin-top: 87px;
position: absolute;
}
.nonHeaderPadding {
float: left;
padding-top: 35px;
width: 1000px;
height: 2px;
clear: both;
}
.oneColumn {
padding-left: 65px;
padding-right: 30px;
float: left;
width: 600px;
}
.SideImage {
margin-left: 775px;
padding-top: 125px;
position: absolute;
z-index: 3;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
}
/* Text */
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
line-height: 125%;
color: #333333;
letter-spacing: 1px;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
color: #000;
text-decoration:underline;
letter-spacing: 1px;
line-height: 125%;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
color: #333333;
text-decoration: underline;
letter-spacing: 1px;
line-height: 125%;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
color: #000;
text-decoration: underline;
letter-spacing: 1px;
line-height: 125%;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
color: #000;
text-decoration: underline;
letter-spacing: 1px;
line-height: 125%;
}
/* Menu */
div#NavContainer ul {
margin-top: 493px;
margin-left: -50px;
height: 36px;
width: 1000px;
text-align: left;
position:absolute;
}
div#NavContainer ul li {
display: inline;
list-style-type: none;
}
div#NavContainer ul li a {
text-decoration: none;
padding: 0;
border: none;
}
div#NavContainer ul li a:hover {
text-decoration: none;
padding: 0;
border: none;
}
img.nav {
border: none;
}
/* Footer */
#Footer, .push {
height: 1.7em;
clear:both;
}
p.Footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 8.5px;
color: #999999;
padding-left: 10px;
}
我已经修改了 SimpleModal 附带的 basic.css 文件，如下所示：
/* Overlay */
#simplemodal-overlay {background-color:#333333; cursor:wait;}
/* Container */
#simplemodal-container {height:35%; width:40%; color:#fff; overflow:auto; background-color:#fff; border:#333333 thin inset;}
#simplemodal-container .simplemodal-data {padding:50px;}
#simplemodal-container a {color:#000000;}
#simplemodal-container a.modalCloseImg {background:url(../images/x.png) no-repeat; width:18px; height:18px; display:inline; z-index:3200; position:absolute; top:25px; right:25px; cursor:pointer;}
<!--[if lt IE 7]>
#simplemodal-container a.modalCloseImg {
background:none;
right:-14px;
width:22px;
height:26px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/x.png', sizingMethod='scale'
);
}
<!--[endif]-->
#simplemodal-container h2 {color:#333333;}
这是我的html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/davincid2.css" type="text/css" media="all" />
<link type="text/css" href="css/basic2.css" rel="stylesheet" media="screen" />
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type="text/css" href="css/basic_ie.css" rel="stylesheet" media="screen" />
<![endif]-->
<script type="text/javascript" src="js/rollover.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<title>DaVinci Digital | Innovative, Complete IT Solutions</title>
</head>
<body id="ourclients">
<div class="wrapper">
<div id="DDLogo">
<div id="headWrapper">
<div class="logo">
<a href="index.html"><img src="images/Davincid-logo.gif" align="left" alt="DaVinci Digital" /></a>
</div>
<div class="pageTitle">
<img src="images/titles/ourclients.jpg" alt="Your Team" height="38" align="right"/>
</div>
</div>
<div id="NavContainer" align="left">
<ul>
<li><a href="who-we-are.html"><img class="nav" src="images/menu/whoweare_up.jpg" alt="Who We Are" /></a></li>
<li><a href="what-we-do.html"><img class="nav" src="images/menu/whatwedo_up.jpg" alt="What We do" /></a></li>
<li><a href="your-team.html"><img class="nav" src="images/menu/yourteam_up.jpg" alt="Your Team" /></a></li>
<li><a href="our-clients.html"><img class="nav" src="images/menu/ourclients_down.jpg" alt="Our Clients" /></a></li>
<li><a href="helpdesk.html"><img class="nav" src="images/menu/davincihelpdesk_up.jpg" alt="DaVinci Helpdesk" /></a></li>
<li><a href="contact.html"><img class="nav" src="images/menu/contact_up.jpg" alt="Contact" /></a></li>
</ul>
</div>
<div class="SideImage"><img src="images/ourclients-image.gif" alt="Our Clients" />
</div>
<div id="ContentArea">
<div class="nonHeaderPadding">
<div class="oneColumn">
<a href="#" onclick="$('<div></div>').load('testimonial-greenhammer.html').modal();" class="basic">Green Hammer testimonial</a>
<p> </p>
<a href="#" onclick="$('<div></div>').load('testimonial-agi.html').modal();" class="basic">Advanced Gastroenterology, PLLC / Advanced Endoscopy Center, PLLC testimonial</a>
<p> </p>
<a href="#" onclick="$('<div></div>').load('testimonial-camphoward.html').modal();" class="basic">Camp Howard testimonial</a>
<p> </p>
<a href="#" onclick="$('<div></div>').load('testimonial-strait.html').modal();" class="basic">Strait Orthopedic Specialists, PS testimonial</a>
<p> </p>
</div>
</div>
</div>
</div>
<div class="DDrawing">
<img src="images/davinci-drawing.jpg" alt="DaVinci" />
</div>
</div>
<div id="Footer">
<p class="Footer">©2012 DaVinci Digital All Rights Reserved.</p>
<p class="Footer"> </p>
</div>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic3.js'></script>
</body>
</html>
我真的被困在这里了！任何见解将不胜感激。非常感谢！