html - 什么 CSS 方法会删除 div 跨浏览器的轮廓

Question

我有两个连接在一起的包含图像的 div。图像分层的方式分为两半。 这按预期工作，但只能在 chrome 中正确查看。在其他浏览器中，存在导致文档看起来不同的轮廓或布局错误。 我认为 outline:0;和边界:0；会成功的。

这就是图像的外观。这是从 chrome 中获取的。如您所见，这在视觉上没有任何问题。

互联网探索

火狐

Safari

CSS:

.login{
    position:absolute;
    left:50%;
    margin-left:-150px;
    top:50%;
    margin-top:-200px;
    width:300px;
    height:400px;
    border-radius:10px;
    text-align:center;
    display:table-cell;
    vertical-align:central;
    padding:0 0 0 0;
    border:0;
    border-style:none;
    outline:0;
}
.login header{
    height:75px;
    width:100%;
    margin-bottom:0;
    padding:0 0 0 0;
    border-style:none;
    outline:0;
    border:0;
}
.login header .logo{
    width:150px;
    height:75px;
    outline:none;
    margin-left:75px;
    border:0;
    border-style:none;
    outline:0;
    background:url(assests/logo_tiny.png) center 0px no-repeat;
    background-color:#000;
    border-radius:75px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    box-shadow:5px 5px 10px #000;
    -moz-box-shadow:5px 5px 10px #000;
    -webkit-box-shadow:5px 5px 10px #000;
    -ms-box-shadow:5px 5px 10px #000;
    -o-box-shadow:5px 5px 10px #000;
}
.login form{
    outline:none;
    width:100%;
    height:245px;
    padding:0 0 0 0;
    padding-top:80px;
    border:0;
    border-style:none;
    box-shadow:5px 5px 10px #000;
    background:url(assests/logo_tiny.png) center -75px no-repeat;
    background-color:#000;
    -moz-box-shadow:5px 5px 10px #000;
    -webkit-box-shadow:5px 5px 10px #000;
    -ms-box-shadow:5px 5px 10px #000;
    -o-box-shadow:5px 5px 10px #000;
    border-radius:10px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#FFF;
}

HTML:

<div class="login">
 <header>
 <div class="logo"></div>
 </header>
 <form>
</form>
</div>

更新:Fiddle

Answer 1

您将 Logo 扁平化是错误的。

150px 宽，只有 75px 高。此外，您还删除了底部的 border-radius。为了让圆圈转换出圆形阴影，整个 div 必须是正方形并且 border-radius 必须相等。

请参阅随附的 fiddle 。

http://jsfiddle.net/mbh6W/2/

所以你看到的那条线实际上是底部被压平的圆的箱形阴影。