2014-01-08 157 views
1

我有一個控件,我試圖強調它被選中時。我正在使用填充div和一些定位來實現這一點,以便它圍繞控件。我遇到的問題是高亮度div上的填充在Chrome和Firefox中呈現不同的效果。我讀過的所有內容都表明它們呈現相同的效果,所以這不應該成爲問題。Firefox和Chrome填充

鉻:

Chrome:

火狐:

Firefox

下面是有它的問題,一個小提琴: http://jsfiddle.net/5fuGB/1/

.control{ 
    position: absolute; 
    width: 100px; 
    height: 20px; 
    top: 30px; 
    left: 300px; 
    z-index: 1; 
} 

.highlighter{ 
    background-color: orange; 
    position: absolute; 
    width: 100%; 
    height:100%; 
    left: -2px; 
    top: -2px; 
    padding-right: 8px; 
    padding-bottom: 10px; 
    z-index: -1; 
} 

input{ 
    width: 100%; 
    height: 100%; 
} 

我的Chrome版本:在Windows 25.0 7

感謝你們可以提供任何幫助: 版本31.0.1650.63 M於Windows 7的

我的Firefox版本。

回答

3

我相信你所看到的差異是來自用戶代理樣式表的差異,瀏覽器有他們自己的默認樣式表,他們用它來渲染像input元素。在你的情況下,它可能是應用於input元素的填充差異。您應該在input元素上專門設置例如:padding: 0px;padding: 1px;,然後弄清楚如何使它看起來正確,input與指定的固定padding。這將覆蓋用戶代理樣式表設置的樣式。

更新

移到了我的Windows PC在固定它一展身手。解決此問題的一種方法是使用評論中鏈接的答案中的供應商特定前綴之一來添加-moz-padding-end: 6px;.highlighter以補償瀏覽器之間填充的差異。

這裏有一個jsFiddle其解決您的問題,一個腳註壽,我已經可以告訴你,這可能不會將其固定到Chrome OSX版,這也是渲染的東西Firefox的方式。

解決此問題的另一種方法是將-moz-padding-start: 1px; -moz-padding-end: 1px;添加到input,但這樣做也會以某種方式更改底部填充,這使Firefox看起來不像其他修補程序那麼漂亮。

+0

好的,我給了一個嘗試,似乎它扭轉了這個問題。現在,Firefox有太多的填充。這裏有一個更新的鏈接:http://jsfiddle.net/5fuGB/3/ – mrK

+0

是的,如果你有第二個,我會指導你以前的答案對你來說可能是有用的,只是找到它在此時此刻。 –

+0

當然,對於那些善於幫助我的人來說,總是有一分鐘的時間。 – mrK

1

我會以不同的方式去談論它。我建議在輸入的「焦點」狀態下使用border-colorbox-shadow的組合,以達到所要達到的效果,而不是使用額外的div。

看看這個修改小提琴:http://jsfiddle.net/5fuGB/2/

+0

因爲我使用了許多不同的控件(包括表示其他東西的空白div),所以我無法使用:focus屬性將CSS添加到控件。此外,輸入框在頁面上只是爲了顯示,但不能與其交互,因此它們將永遠不會實際獲得:focus – mrK

+0

@mrK在你的問題中,你說它是'selected' - 如果元素沒有焦點? – ChrisW

0

你做得比什麼必要多一點。要解決這個輸入的一大亮點,您可以使用:集中

因此,這將是這樣的:

CSS 

input { 
    border: 1px solid white; 
} 

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

,這將使輸入一個白色的「看不見」的邊界,因此不會移動輸入當你點擊它時。它只需將邊框顏色更改爲橙​​色即可獲得您要查找的高光效果。

編輯 剛剛看到您的評論。我沒有代表評論,所以我只是添加到這一點。

如果你不使用輸入作爲實際輸入,那麼我只是讓他們的div。輸入默認情況下呈現不同的樣子,這樣會導致瀏覽器間的一致性變差。

我也建議試試這些div在彼此之間,並使最外面的div相對。

Outside Div <------ position:relative; 
Middle Div <------- position: absolute; 
Inner div <-------- position: absolute; 

另外,如果你需要選擇的狀態,但不希望或輸入被阻礙,那麼我建議jQuery的修改基於用戶交互的CSS。

+0

查看評論我留在TheWiseAxe的回答 – mrK

1

剛剛經歷了與我的代碼相同的問題,並修復了它。訣竅是如果你使用display:inline-block,那麼line-height是有意義的。在調試代碼時嘗試一下。