Opera - 焦點和懸停事件很糟糕

我有一些CSS在Chrome，FireFox和IE中運行良好，但在Opera中看起來很奇怪。Opera - 焦點和懸停事件很糟糕

鏈接到fiddle

而且，我把截圖：

這會發生什麼的只是忘了鏈接懸停：

enter image description here

這發生在形式焦點（完整的災難）：

enter image description here

普通看看在Chrome：

enter image description here

提交關於焦點按鈕失去它的邊框顏色（爲什麼在地獄？）
焦點有些亂，我無法解釋，只取看第二張圖片

我測試了最新版本的Opera。這個瀏覽器到底怎麼了？即使IE8顯示了我所期望的一切。

CSS：

.sign_in { 

    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -255px; 
    background: #ffffff; 
    width: 510px ; 
    height: 240px; 
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; 
    z-index: 9999999; 
    font-size: 14px; 
    -webkit-box-shadow: 0 0 5px black; 
    -moz-box-shadow: 0 0 5px black; 
    box-shadow:   0 0 5px black; 


} 
.signs_form{ 
    border-right-style: solid; 
    border-color: rgba(80, 140, 255, 0.83); 
    border-width: 1px; 
    margin-top: 40px; 
    vertical-align: 100%; 
    margin-left: 50px; 
    padding-right: 50px; 
    font-weight: 500; 
    display: inline-block; 




} 

input#email{ 

    border-style: solid; 
    border-color: #378de5; 
    border-width: 1px; 
    padding: 3px 3px 3px 3px; 
    font-size: 14px; 
    outline: none; 
    font-style: normal; 
    font-weight: 400; 


} 
input#email:focus{ 
    border-color: rgba(2, 22, 222, 0.97); 

} 
input#password{ 
    border-style: solid; 
    border-color: #378de5; 
    border-width: 1px; 
    padding: 3px 3px 3px 3px; 
    font-size: 14px; 
    outline: none; 
    font-style: normal; 
    font-weight: 400; 

} 

input#password:focus{ 
    border-color: rgba(2, 22, 222, 0.97); 

} 




.sign_in_submit { 
    margin-top: 0; 
    border: solid 1px #378de5;; 
    background-color: #ffffff; 
    color: #378de5; 
    padding: 2px 5px 2px 5px ; 
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 16px; 
    font-weight: 500; 


} 
.sign_in_submit:hover { 
    cursor: pointer; 
    border-color: rgba(2, 22, 222, 0.97); 
    color: rgba(2, 22, 222, 0.97); 
} 


#close { 

    float: right; 
    padding-left:-10px; 
    padding-top: -10px; 
    margin-right: 5px; 


} 
#close_sign_in_popup { 
    text-decoration: none; 
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 20px; 
    color: #d61354; 
} 

#close_sign_in_popup:hover { 
    color: #fc145f; 
} 
.forgot_pass{ 
    display: block; 
    margin-top: 5px; 
    margin-bottom: 0; 
    margin-left: 2px; 
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; 
    color: #378de5; 
    font-size: 13px; 
    font-weight: 400; 
    text-decoration: none; 
} 

.forgot_pass:hover{ 
    height: 100%; 
    text-decoration: underline; 
}

來源

2013-05-29 Joe Half Face

張貼正常情況下的照片。它看起來像你有內容重疊。大多數瀏覽器都可以處理這個問題，因爲它會忽略你的設置並把所有東西混在一起（或多或少）。顯然，不是Opera。 –

添加了Chrome屏幕截圖 –

叉形http://jsfiddle.net/w29WQ/1/

.sign_in { 
    /*top: 50%; // so it seems the positioning gets all funky in opera 
    left: 50%;*/ 
    margin-top: 0; 
    margin-left: 0; 
    /* Your other styles for this element */ 
}

總之，看來你的固定定位是造成錯誤，我只是註釋掉的頂部和包含div左側定位，並重新設置頁邊距保持元素顯示。

來源

2013-05-29 04:20:17 foochow

好的，夥計們。

1）切換的形式

的原因是，歌劇強烈厭惡inline-block爲形式的財產，這是相當合理的，實際的，但所有其他瀏覽器undertand這一點，它是方便易

2）鬆動邊界 - 現場焦點提交按鈕的顏色

但這裏 - Opera bug，可以通過放置在真正的標籤隱形副本之前修復 - 因此它就像這個Opera bug的誘餌。

來源

2013-05-29 07:17:01

Opera - 焦點和懸停事件很糟糕

回答

相關問題