css3 - Typecho 后台部分表单按钮在 Chrome 下出现灵异动画问题，求解决

Question

我给按钮添加了 compass 的 transition-duration(.4s) 的动画，用于控制按钮背景色。 但是加了以后 登录页面 和【控制台-个人设置】页面的按钮却出现了从小变大的效果，但是在【设置-（下面所有页面）】下所有的...

伊谢尔伦 · Answer

研究半天，終於在網上找到了一個可行的解決辦法
http://css-tricks.com/transitions-only-after-page-load/

解決步驟(在指定文件裏修改或添加代碼)：

admin/header.php

admin/css/style.css

/*可以放在 body {} 下面*/
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

admin/common-js.php

$(document).ready(function() {
  $("body").removeClass("preload");
});

已經發現在如下情況下會出現問題：

button 處在一個 form 中，並且 form 裏至少有一個 input[type=password]
設置 button 樣式的 css 代碼是通過 link 元素外鏈進來的，若是通過 style 元素直接把 css 代碼寫到頁麵內，問題消失
如果 css 代碼前有一大段外鏈的 javascript 代碼（例如一個 jquery.js），且沒有被緩存，也有可能使問題消失

最小化的會出問題的代碼：
index.html

index.css

button {
  background-color: blue;
  -webkit-transition: background-color 0.5s;
}
button:hover {
  background-color: orange;
}

P.S. 這個應該算是 Chrome 的 bug 吧

伊谢尔伦 · Answer

-- I'LL BE BACK 答错了无所谓，我还会回来的 --

我不懂compass，估計也拿不到compass的原文件，就從最終的css文件入手看了

把transision有關屬性，隻打在:hover偽類上，而不是打在元素的整個類上。

https://gist.github.com/shamiao/7747795 我對style.css的修改。（有注釋的部分就是改動）