小编Joh*_*hnW的帖子

我有一个可爱的星际迷航红色警报动画使用CSS3.我的一个父元素有一个border-radius,overflow:hidden所以任何内容都被裁剪为边框半径的形状.

这一切在Firefox中运行良好,但Webkit浏览器会将一些子元素悬挂在裁剪区域之外.

这是我的代码:

http://jsfiddle.net/doublewombat/EqK6R/embedded/result/

在div与类名curvedEdges有border-radius和overflow:hidden.但是,"警报"文本左右两侧的块悬挂在此半径之外,即使它们是子元素curvedEdges.或者用简单的英语,动画的左右边缘应略微弯曲(如在Firefox中),而不是直线.

那么这是Webkit中的一个错误,还是我出错了？

如果您没有方便的Webkit浏览器,它就在YouTube上...

http://www.youtube.com/watch?v=3vyVy21nWsE

假设我想在视口的中心放置一个元素,用作弹出消息.它应该满足以下要求:

• 即使元素大小动态变化,元素也应在浏览器中保持居中(水平和垂直)
• 如果调整浏览器大小,元素应保持居中
• 不允许使用Javascript
• 仍然适用于IE7

如果没有采用下面的基于表格的解决方案,有没有更好的方法来实现这一目标？

<table style="position:absolute;width:100%;height:100%">
    <tr>
        <td align="center">
            <span id="centeredContent">I always remain centered</span>
        </td>
    </tr>
</table>