css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現靈異動畫問題，求解決
問題描述
我給按鈕添加了 compass 的 transition-duration(.4s) 的動畫，用于控制按鈕背景色。但是加了以后 登錄頁面 和【控制臺-個人設置】頁面的按鈕卻出現了從小變大的效果，但是在【設置-（下面所有頁面）】下所有的按鈕都沒有出現大小變化的情況。
于是我又加了句 transition-property(background-color)，按鈕的形狀沒有變化了，但是出現了從無到有的漸變過程，這個就不明白了，js 全禁用了也是這樣，查了半天也沒查出原因。
safari 和 firefox 下都顯示正常，只有在 hover 過程才出現背景色漸變的動畫。但是在 Chrome 瀏覽器里出現了形狀變化或展示之初變化（我的版本 31.0.1650.57），不知道是什么問題，應該如何解決？
演示后臺 http://typecho.org/admin/login.php
問題解答
回答1：研究半天，終于在網上找到了一個可行的解決辦法http://css-tricks.com/transitions-only-after-page-load/
解決步驟(在指定文件里修改或添加代碼)：
admin/header.php<body class='preload<?php if (isset($bodyClass)) {echo ’ ’.$bodyClass;} ?>'>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
<!doctype html><link rel='stylesheet' href='http://www.cgvv.com.cn/wenda/index.css'/><form> <input type='password'/> <button>登錄</button></form>
index.css
button { background-color: blue; -webkit-transition: background-color 0.5s;}button:hover { background-color: orange;}
P.S. 這個應該算是 Chrome 的 bug 吧
回答2：-- I’LL BE BACK 答錯了無所謂，我還會回來的 --
我不懂compass，估計也拿不到compass的原文件，就從最終的css文件入手看了
把transision有關屬性，只打在:hover偽類上，而不是打在元素的整個類上。
https://gist.github.com/shamiao/7747795 我對style.css的修改。（有注釋的部分就是改動）
相關文章：
1. css - 重寫checkbox樣式 用到id 與label關聯實現 但是現在checkbox循環生成多項 就不能用id了 求解決辦法2. css - 移動端h5播放器問題求解決，急急3. java - 創建maven項目失敗了 求解決方法4. docker鏡像無法刪除，請求解決辦法。5. python+jinja2編寫前端界面，發生Unexpected end of template問題，求解決！6. python - 一個Flask Web應用報了一個error: [Errno 10053]錯，求解決。7. javascript - 微信網頁開發從菜單進入頁面后，按返回鍵沒有關閉瀏覽器而是刷新當前頁面，求解決？8. python相關問題求解決，有償9. javascript - 手機點擊input時，button會被頂上去？求解決！！！10. javascript - 移動端開發 H5 頁面在 iOS手機上無法實現 長按復制文本 求解決
網公網安備