2011-04-14 103 views
1

我遇到了一個問題,我的CSS只發生在IE7中,我希望別人之前遇到過這個問題。基本上我們有一個客戶網格設計,當單元格懸停時單元格突出顯示。這個效果很好,但是在IE7中突出顯示的棍子,你在單元格上方,然後離開單元格,突出顯示仍然存在。鼠標懸停在IE7

這裏是我使用的電池

.cell input:hover 
{ 
    background-color: #54B5FF; 
} 

感謝CSS!

編輯:家長

.cell input 
{ 
border:none; 
background:transparent; 
padding:11px 6px; 
width:35px; 
height:16px; 
line-height:16px; 
text-align:right; 
background-color:transparent; 
border-radius:0;-moz-border-radius:0;-webkit-border-radius:0; 
} 

編輯:發現修復!

我發現了一個修復程序,我想我會與其他人在未來遇到這個錯誤分享。顯然,在IE7中,只有某些樣式更改會導致稱爲hasLayout的情況,這顯然會導致它正確地重新呈現。在我的情況下,我將代碼更改爲

.cell input:hover 
{ 
position: static; 
background-color: #D7ECFF; 
} 

這並沒有改變任何東西,但它確實導致IE7正確渲染它!

+0

稍候... IE7支持上投入懸停?你根本不使用JavaScript? – 2011-04-14 21:37:08

+0

是的,看到我的編輯解決方案 – confused 2011-04-14 22:03:01

+0

經過一番挖掘,我發現IE7確實支持:hover僞類與嚴格的文檔類型一起使用時。你懂得越多。 – 2011-04-15 16:50:38

回答

0

設置默認值。

嘗試:

.cell input { 
    background-color: #fff; /* or whatever you want it to be... */ 
} 

.cell input:hover 
{ 
    background-color: #54B5FF; 
} 
+0

對不起,我應該發佈父母 '.cell input { \t border:none; \t背景:透明; \t padding:11px 6px; \t width:35px; \t height:16px; \t line-height:16px; \t text-align:right; \t background-color:transparent; \t border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; }' – confused 2011-04-14 21:33:46