CSS登錄彈出窗口，使文本框提示不能與文本框

Question

這工作得很好正確對齊下鉻34.0.1847，但不是在火狐29.0.1

上的jsfiddle複製問題：http://jsfiddle.net/3a942/1/

注意：輸入任何文本，按提交然後再次單擊運行，然後嘗試再次輸入相同的文本以查看工具提示。

全部CSS的登錄彈出窗口

.overlay { 
    background-color: rgba(0, 0, 0, 0.6); 
    bottom: 0; 
    cursor: default; 
    left: 0; 
    opacity: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    visibility: hidden; 
    z-index: 1; 
    -webkit-transition: opacity .5s; 
    -moz-transition: opacity .5s; 
    -ms-transition: opacity .5s; 
    -o-transition: opacity .5s; 
    transition: opacity .5s; 
} 
.overlay:target { 
    visibility: visible; 
    opacity: 0.99; 
} 


.popup { 
    width: 510px; 
    background-color: #fff; 
    border: 1px solid #fff; 
    display: inline-block; 
    left: 50%; color:#666; 
    opacity: 0; 
    padding: 25px; 
    position: fixed; 
    top: 50%; 
    visibility: hidden; 
    z-index: 10; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    -o-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; 
    -webkit-transition: opacity .5s, top .5s; 
    -moz-transition: opacity .5s, top .5s; 
    -ms-transition: opacity .5s, top .5s; 
    -o-transition: opacity .5s, top .5s; 
    transition: opacity .5s, top .5s; 
} 

.overlay:target+.popup { 
    top: 50%; 
    opacity: 1; 
    visibility: visible; 
} 


.close { 
    background-color: rgba(0, 0, 0, 0.8); 
    height: 32px; 
    line-height: 32px; 
    position: absolute; 
    right: 0; 
    text-align: center; 
    text-decoration: none; 
    top: -15px; 
    width: 33px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -ms-border-radius: 8px; 
    -o-border-radius: 8px; 
    border-radius: 8px; 
} 
.close:before { 
    color: rgba(255, 255, 255, 0.9); 
    content: "X"; 
    font-size: 24px; 
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9); 
} 
.close:hover { 
    background-color: rgba(64, 128, 128, 0.8); 
} 


.popup label { 
    display: inline; 
    text-align: left; 
} 
.popup input[type="text"], .popup input[type="password"] { 
    margin: 0; 
    padding: 4px; background:#d8f6fd; 
    border: 2px solid #66c8de; 
    -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; 
    -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; 
    box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 
.popup input[type="text"]:hover, .popup input[type="password"]:hover { 
    background: #fff 
} 

.popup input[type=button]{ 
    cursor: pointer; 
    font: bold 15px Arial, Helvetica; 
    color: #fafafa; 
    width: 150px; 
    text-transform: uppercase; 
    background-color: #0483a0; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0)); 
    background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0); 
    background-image: -moz-linear-gradient(top, #31b2c3, #0483a0); 
    background-image: -ms-linear-gradient(top, #31b2c3, #0483a0); 
    background-image: -o-linear-gradient(top, #31b2c3, #0483a0); 
    background-image: linear-gradient(top, #31b2c3, #0483a0); 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    padding:6px; 
    text-shadow: 0 1px 0 rgba(0, 0 ,0, .3); 
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; 
} 

.popup .validation-error { 
    color: #DC143C; 
    font-weight: bold; 
} 

---

什麼可能會導致這不對任何想法？我玩了一些屬性，並能夠獲得工具提示對齊，但這意味着我將窗口移動到該位置。

Answer 1

這就是翻譯屬性。嘗試使用其他方法將彈出對中（http://www.sitepoint.com/css-center-position-absolute-div/）