Question

我在这里有一个'测试'数据库：

http://www.bayingwolf.com/addRecords.asp

如果您点击“添加记录”弹出一个模态表单，并且在该表单的右上角应该有一个小的PNG图像'X'来关闭表单。

它应如下所示：http://www.ericmmartin.com/projects/simplemodal-demos/（在“基本模态对话框”下单击“演示”），并且X图像就位。

在下载中，作者在index.html页面上使用以下内容：

<!-- preload the images --> 
<div style='display:none'>  
<img src='img/basic/x.png' alt='' />

我完全一样。当我在桌面上打开他的index.html页面时，我可以看到X图像（我无法在桌面上打开我自己的页面，因为它是一个ASP文件）但是，奇怪的是，当我将他的index.html文件上传到我的服务器我看不到图像。

我已经仔细检查了服务器路径，我将X图像放在一个名为“basic”的文件夹中，该文件夹位于另一个名为“img”的文件夹中。

管理图像定位的CSS（在basic.css中）如下：

#simplemodal-container a.modalCloseImg {
    background: url(../img/basic/x.png) no-repeat; 
    width: 25px; 
    height: 29px; 
    display: inline; 
    z-index: 3200; 
    position: absolute; 
    top: -15px; 
    right: -16px; 
    cursor: pointer;
}

我的代码不是原始代码的副本 - 我的页面上有一个表单，但这不会影响X图像的定位。

请提出任何建议（我已经在这上面至少两天了！）？

由于

Answer 1

您在问题中提供的CSS未出现在 basic.css 样式表中。相反，你有这样的东西：

#simplemodal-container a {color:#ddd;} /* <-- bracket closed */


{background:url(x.png) no-repeat; /* <-- CSS parse error */
width:25px; 
height:29px; 
display:inline; 
z-index:3200; 
position:absolute; 
top:-15px; 
right:-16px; 
cursor:pointer;}

您可能不希望在color属性后关闭此大括号。所以清理你的CSS：

#simplemodal-container a.modalCloseImg {
    color: #ddd;
    background: url(x.png) no-repeat;
    width: 25px; 
    height: 29px; 
    display: inline; 
    z-index: 3200; 
    position: absolute; 
    top: -15px; 
    right: -16px; 
    cursor: pointer;
}

Answer 2

经过一番挖掘，你的css有问题。此css规则没有标签可供使用。您应该将id或类添加到此规则中。这可能无法解决所有问题，但这是朝着正确方向迈出的一步。

我只是快速浏览一下，但我认为课程应该是.simplemodal-close

#simplemodal-container a {color:#ddd;}


{background:url(x.png) no-repeat; 
width:25px; 
height:29px; 
display:inline; 
z-index:3200; 
position:absolute; 
top:-15px; 
right:-16px; 
cursor:pointer;}


#simplemodal-container h3 {color:#84b8d9;}

应该是：

#simplemodal-container a {color:#ddd;}


.simplemodal-close {
   background:url(x.png) no-repeat; 
   width:25px; 
   height:29px; 
   display:inline; 
   z-index:3200; 
   position:absolute; 
   top:-15px; 
   right:-16px; 
   cursor:pointer;}


#simplemodal-container h3 {color:#84b8d9;}

修改经过更多调查后，您的ie.css也会覆盖basic.css中的css。所以请确保您的ie.css仅在IE中加载并且也是正确的。

此外，背景的网址仍然不正确，当它http://www.bayingwolf.com/css/x.png中的http://www.bayingwolf.com/x.png实际生活在../x.png时，它正在寻找它。所以你的路径应该是.simplemodal-close { background:url(../x.png) no-repeat; ... /* rest of declarations */ }，例如：

{{1}}

图像丢失了

2 个答案: