CSS悬停代码在Firefox上不起作用[重复]

Question

我有这么多用于按钮及其悬停的代码。这段代码在任何地方都可以运行，它在 chrome 上运行良好，即 safari，但在 Firefox 上运行不正常。除了悬停部分之外，与按钮相关的每个 CSS 代码都可以正常工作。

      <button class="button validation-passed" onclick="productAddToCartForm.submit(this)" dtyle="float:left" title="Add to Cart" type="button">

    <span>
       <span>

        Add to Cart

       </span>
   </span>

 </button>

这是按钮的 CSS 代码：

       button.button::-moz-focus-inner { padding:0; border:0; } /* FF Fix */
       button.button { -webkit-border-fit:lines; } /* <- Safari & Google Chrome Fix */
       button.button { overflow:visible; width:150px; border:0; padding:0; margin:0;    background:transparent; cursor:pointer;}
       button.button span { display:block;  font:12px/24px georgia; text-align:center; white-space:nowrap; color:#fff;background:#f79b29;border-color:#7B9617;height:24px;padding:0 8px;font-weight:normal !important;}
      button.button span:hover{background:#f48227}
      button.button span{ border:0; padding:0; }

Answer 1

改变

 button.button span:hover {
  background:#f48227
  }

进入

 button.button:hover span {
  background:#f48227
  }

演示：http://jsfiddle.net/lotusgodkk/GCu2D/60/