CSS3阻止AJAX單擊事件

Question

我使用了一點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，果然，每次都發生點擊事件。

更新：其實我在瀏覽器中禁用JavaScript和沒有JavaScript測試頁面，出於某種原因，不是每一次，但一旦在大約五十左右點擊，格式化的鏈接的點擊不工作。如果一個鏈接無法打開新的頁面（即使在瀏覽器中禁用了JS），我可以點擊它一百次，但它不會工作 - 但稍微移動一個光標，一個像素，然後再次點擊 - 啓用鏈接。

什麼可能導致該問題？有沒有辦法以不同的方式重新創建相同的CSS，以確保CSS不會干擾點擊事件？

Answer 1

找到了我自己的答案，這要感謝在評論中進行了擴展討論。編寫這個答案，以防任何人遇到類似的問題，併到達此頁面。

罪魁禍首是一個小規則，它實際上隱藏在樣式表中的其他地方 - 但應用到相同的元素，就像建議的那樣。

該規則將margin-top: 1px;添加到處於活動狀態的按鈕。由於某種原因，即使一個按鈕生成了mousedown事件，它也沒有發生click事件。

刪除該規則解決了問題。