Question

我在母版页面添加了一个新的css元素。但在那之后，我无法点击页面中的其他控件。我知道有些div与其他div重叠使点击不起作用。但我无法用css文件搞清楚。我的css文件如下：

这里我将我的div放在html中：

/* XLSF 2007 */

body {
  background: #333 url(image/bg-strip-dark.png) 0px 0px;
  font-family: normal, "Century Gothic", "Helvetica Neue Light", "Helvetica Neue", georgia, "times new roman", "Arial Rounded MT Bold", helvetica, verdana, tahoma, arial, "sans serif";
  font-size: 75%;
  color: #666;
}
h1,
h1 a {
  color: #999;
  text-decoration: none;
}
h1 {
  color: #999;
  margin-bottom: 0;
  margin-left: -5px;
  margin-top: 0;
  padding-left: 5px;
  padding-right: 5px;
}
h1,
h2,
h3 {
  clear: both;
  float: left;
  font-family: normal, "Century Gothic", "Helvetica Neue Light", "Helvetica Neue", georgia, "times new roman", "Arial Rounded MT Bold", helvetica, verdana, tahoma, arial, "sans serif";
  font-size: 3em;
  font-size-adjust: none;
  margin-bottom: 0.25em;
  padding-bottom: 1px;
}
h1,
h2 {
  letter-spacing: -1px;
  margin-bottom: 0;
  margin-left: -5px;
  margin-top: 0;
  padding-left: 5px;
  padding-right: 5px;
}
a {
  color: #6699cc;
  padding: 0px 2px;
  text-decoration: none;
}
a:hover {
  background: #6699cc;
  color: #fff;
}
#lights {
  clear: both;
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 96px;
  overflow: hidden;
  z-index: 1;
}
.xlsf-light {
  position: relative;
}
body.fast .xlsf-light {
  opacity: 0.9;
}
.xlsf-fragment {
  position: relative;
  background: transparent url(image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
  width: 50px;
  height: 50px;
}
.xlsf-fragment-box {
  position: relative;
  left: 0px;
  top: 0px;
  width: 50px;
  height: 50px;
  *width: 100%;
  *height: 100%;
  display: none;
}
.xlsf-cover {
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 1;
  z-index: 999;
  display: none;
}
/*
.xlsf-light.bottom {
 height:49px;
 border-bottom:1px solid #006600;
}

.xlsf-light.top {
 height:49px;
 border-top:1px solid #009900;
}
*/

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

  <!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 runat="server">
    <link rel="stylesheet" media="screen" href="christmaslights.css" />
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
      .style1 {
        width: 135px;
      }
    </style>
    <script src="snowstorm.js"></script>
    <script>
      snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
      snowStorm.flakesMaxActive = 96; // show more snow on screen at once
      snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
    </script>
    <script src="lights/soundmanager2-nodebug-jsmin.js"></script>
    <script src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
    <script src="lights/christmaslights.js"></script>
  </head>

  <body>
    <form id="form1" runat="server">
      <div>
        <table style="width:100%;">
          <tr>
            <td class="style1">
              <asp:Image ID="Image1" runat="server" ImageUrl="~/images/remedyonline-logo.png" />
            </td>
            <td>
              <span style="font-family: Tahoma; font-size: xx-large; font-weight: bold; color: #666666; padding-left: 10px;">Representatives Corner
                    
                    <marquee direction="right"><font color=#993300 size=5 ><strong>GDS Wishes A HAPPY X'MAS</strong></marquee></font>
                   
                    </span>
            </td>
          </tr>
        </table>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
      </div>
    </form>
    <div id="lights">
    </div>
  </body>

  </html>

至少请通知我问题出在哪里。我是html和css的新手。

Answer 1

可能是具有修改的z-index属性的元素之一呈现在上述控件之上。然后，解决方案是通过删除属性并观察结果来确定哪一个对您有问题。

然而，更好的解决方案可能是在您喜欢的浏览器中了解开发人员工具 - 它们对于这样的情况非常有帮助：

Chrome Dev Tools

Firefox Dev Tools

添加Css后无法单击控件

1 个答案: