转换后的父级与其子级之间的细线空白

Question

我有一个与父母div相同背景颜色的div＆＃39;边框颜色。我想要的是父div和背景颜色的div完美对齐，但我得到的是父母和孩子之间的一条细线。

如果有帮助，则父div会向内旋转。

父：

border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
border-left: .5rem solid #222;
border-right: .5rem solid #222;
border-top: .5rem solid #222;
overflow: hidden;
-webkit-transform: perspective( 1200px ) rotateX( 20deg );
   -moz-transform: perspective( 1200px ) rotateX( 20deg );
        transform: perspective( 1200px ) rotateX( 20deg );

儿童：

float: left;
text-align: center;
border-bottom: 2px solid #F2C3CC;
position: relative;

我希望我提供的图片足够清晰，让您可以看到边框和黑暗之间出现的空白＆＃34; DEMO＆＃34;格。

我使用的是OS X 10.9.5以及Chrome 37.0.2062.124，如果这对这个问题很重要的话。

JSFiddle

Answer 1

我认为这是因为边界和背景之间的差距造成的？我的解决方案是创建2个子div，一个用于顶部，一个用于底部，如下所示：jsfiddle

＆＃13;

＆＃13;

.wrap {
    margin: 0 auto;
    width: 300px;
    height: 400px;
    background-color: #222;
    border: .5rem solid #222;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    overflow: hidden;
    -webkit-transform: perspective( 1200px ) rotateX( 20deg );
    -moz-transform: perspective( 1200px ) rotateX( 20deg );
    transform: perspective( 1200px ) rotateX( 20deg );
    
}

.inner {
    float: left;
    width: 100%;
    height: 200px;
    background-color: #222;
    color: #fff;
    text-align: center;
}
.innersecond{
    float: left;
    width: 100%;
    height: 200px;
    background-color: #fafafa;
    text-align: center;
}

＆＃13;

<div class="wrap">
    <div class="inner">Lorem</div>
    <div class="innersecond">Ipsum</div>
</div>

＆＃13;

＆＃13;

＆＃13;

[edit]这个为我修好了，在Windows 7上使用chrome 37