大綱輪流INLINE - 鉻錯誤我認爲

任何人都可以告訴我爲什麼地獄是谷歌瀏覽器發生這種情況？ http://jsfiddle.net/webtiago/D2jLr/大綱輪流INLINE - 鉻錯誤我認爲

大綱表示這是一條外在的東西正確的線？當我專注於我的輸入時，我的大綱變成了「內聯」。它不應該對嗎？這正在我正在進行的幾個項目中發生。我使用Chrome 19.0.1084.52米。

任何幫助？

2012-06-04 Tiago Castro

看起來就是這樣。嘗試this我讓線條變粗。綱要仍在外部。

它在1px中移動看起來只是一個Chrome的bug。你可以通過切換焦點上的邊框和輪廓顏色來解決它。

input:focus { border: 1px solid red; outline: 1px solid orange;}

它仍然在1px中移動，但顏色的順序至少保持不變。

來源

2012-06-04 21:25:55 sachleen

它的工作原理，但只有當你所說的線條更粗。而當你關注輸入時，輪廓約1像素 - 足以讓所有人都陷入困境，當我使用細線時 –

我認爲最好的解決方案是使用box-shadow屬性。它不適用於所有瀏覽器，但至少會讓我覺得更漂亮。 –

是的，雖然有方式[IE中的盒子陰影]（http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-沒有的JavaScript /）。不漂亮（代碼明智），但它可能有幫助。 – sachleen

-1

Chrome的輪廓邊框比輸入框的邊框稍粗，導致它看起來像是在內部。

outline:none;

演示http://jsfiddle.net/D2jLr/2/

來源

2012-06-04 21:35:19 Brad

他已經有自定義大綱。問題在於，當輸入框處於焦點時，輪廓以1px移動，使其看起來像「內聯」而不是輪廓，因爲它看起來在邊框內。 – sachleen

我希望邊框永遠在那裏。在正常和對焦模式下，爲什麼它會有所不同？我已經通過「1px solid」來定義輪廓的寬度。 –

鉻改變outline-offset（控制輪廓的位置）上的焦點：如果這很討厭，你可以把Chrome的輪廓。

只需使用outline: 1px solid blue; outline-offset: 0;，它會按照您希望的方式工作。

來源

2012-06-04 21:59:31 Zarel

大綱輪流INLINE - 鉻錯誤我認爲

回答

相關問題