CSS 登录弹出窗口使文本框工具提示无法与文本框正确对齐

Question

这在 Chrome 34.0.1847 下工作正常，但在 Firefox 29.0.1 上不行

JSFiddle 上的重复问题:http://jsfiddle.net/3a942/1/

NOTE: Enter any text, press submit then click run again and attempt to enter the same text again to see the tool-tip come up.

登录弹出窗口的完整 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/ ) 将弹出窗口居中