0

我正在使用一点 CSS3 渐变来绘制链接的背景，使其看起来像一个按钮。当链接处于活动状态时，我还会添加文本阴影。这是HTML：

<div id="inner-page-sidebar">

    <div id="secondary" class="widget-area" role="complementary">               
        <aside id="nav_menu-4" class="sidebar-four-widget widget widget_nav_menu"><h3 class="widget-title">About</h3><div class="menu-sidebar-4-menu-1-about-container"><ul id="menu-sidebar-4-menu-1-about" class="menu"><li id="menu-item-1223" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1223"><a href="http://hiddenwebdomain.com/about/the-company/">The Company</a></li>
<li id="menu-item-1134" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-1134"><a href="http://hiddenwebdomain.com/about/corporate-governance/">Corporate Governance</a></li>
<li id="menu-item-1224" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1224"><a href="http://hiddenwebdomain.com/about/employment/">Employment</a></li>
<li id="menu-item-1111" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1111"><a href="http://hiddenwebdomain.com/about/customer-service/">Customer Service</a></li>
<li id="menu-item-1113" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1113"><a href="http://hiddenwebdomain.com/about/faqs/">FAQs</a></li>
<li id="menu-item-1114" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1114"><a href="http://hiddenwebdomain.com/about/contact-us-2/">Contact Us</a></li>
</ul></div></aside>

<aside id="nav_menu-5" class="sidebar-four-widget widget widget_nav_menu"><h3 class="widget-title">Corporate Information</h3><div class="menu-sidebar-4-menu-2-corporate-info-container"><ul id="menu-sidebar-4-menu-2-corporate-info" class="menu"><li id="menu-item-1115" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1115"><a href="http://hiddenwebdomain.com/about/corporate-governance/board-of-directors/">Board of Directors</a></li>
    <li id="menu-item-1116" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1116"><a href="http://hiddenwebdomain.com/about/corporate-governance/management-team/">Management Team</a></li>
    <li id="menu-item-1117" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-645 current_page_item menu-item-1117"><a href="http://hiddenwebdomain.com/about/corporate-governance/code-of-ethics/">Code of Ethics</a></li>
    <li id="menu-item-1118" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1118"><a href="http://hiddenwebdomain.com/about/corporate-governance/audit-committee-charter/">Audit Committee Charter</a></li>
    <li id="menu-item-1119" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1119"><a href="http://hiddenwebdomain.com/about/corporate-governance/compensation-committee-charter/">Compensation Committee</a></li>
    <li id="menu-item-1120" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1120"><a href="http://hiddenwebdomain.com/about/corporate-governance/nominating-and-corporate-governance-committee-charter/">Nominating And Governance</a></li>
    <li id="menu-item-1121" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1121"><a href="http://hiddenwebdomain.com/about/corporate-governance/contact-non-management-directors/">Contact Directors</a></li>
    <li id="menu-item-1122" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1122"><a href="http://hiddenwebdomain.com/about/corporate-governance/contact-audit-committee/">Contact Audit Committee</a></li>
    </ul></div></aside>    


    </div> <!-- END INNER-PAGE-SIDEBAR -->

这是CSS：

.dealer-selector-button-gradient,
.widget_nav_menu ul li a {
    color: #505050;
    border: solid 1px #c6c6c6;  
    background: #f1f1f1;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, #ffffff, #f1f1f1); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top, #ffffff, #f1f1f1); /* FF3.6+ */
    background: -ms-linear-gradient(top, #ffffff, #f1f1f1); /* IE10 */
    background: -o-linear-gradient(top, #ffffff, #f1f1f1); /* Opera 11.10+ */
    background: linear-gradient(top, #ffffff, #f1f1f1); /* W3C */
}

.dealer-selector-button-gradient:hover,
.widget_nav_menu ul li a:hover {
    background: #e4e4e4;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e0e0)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, #ffffff, #e0e0e0); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top, #ffffff, #e0e0e0); /* FF3.6+ */
    background: -ms-linear-gradient(top, #ffffff, #e0e0e0); /* IE10 */
    background: -o-linear-gradient(top, #ffffff, #e0e0e0); /* Opera 11.10+ */
    background: linear-gradient(top, #ffffff, #e0e0e0); /* W3C */
}

.dealer-selector-button-gradient:active,
.widget_nav_menu ul li a:active {
    color: #505050;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    background: #f5f5f5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#ffffff)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, #f1f1f1, #ffffff); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top, #f1f1f1, #ffffff); /* FF3.6+ */
    background: -ms-linear-gradient(top, #f1f1f1, #ffffff); /* IE10 */
    background: -o-linear-gradient(top, #f1f1f1, #ffffff); /* Opera 11.10+ */
    background: linear-gradient(top, #f1f1f1, #ffffff); /* W3C */
}

我在这里一定做错了什么，因为当我使用 AJAX 加载该页面时，有时单击任何格式的链接都无法生成单击事件。

我对AJAX代码进行了一次又一次的测试，似乎没有任何问题。

然后我把css去掉了，果然每次都会发生click事件。

更新：我实际上在浏览器中禁用了 JavaScript，并在没有 JavaScript 的情况下测试了该页面，并且由于某种原因，不是每次，而是在大约 50 次左右的点击中，点击格式化的链接不起作用。

更新2：更奇怪的是，如果一个链接无法打开新页面（即使在浏览器中禁用了JS），我可以点击它一百次，它不会工作 - 但稍微移动光标，一个像素，然后再次单击 - 启用链接。

什么可能导致该问题？有没有办法以不同的方式重新创建相同的 CSS，以确保 CSS 不会干扰点击事件？

4

1 回答 1

1

感谢评论中的扩展讨论，找到了我自己的答案。写下这个答案，以防有人遇到类似问题并到达这个页面。

罪魁祸首是一个小规则，它实际上隐藏在样式表的其他地方——但正如建议的那样，应用于相同的元素。

该规则添加margin-top: 1px;到处于活动状态的按钮。由于某种原因，即使一个按钮生成了mousedown事件，它也未能click事件。

删除该规则解决了这个问题。

于 2013-06-12T17:08:47.987 回答