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

Question

这适用于 Chrome 34.0.1847 ，但不适用于 Firefox 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/）

对弹出窗口进行居中