移动端设置了overflow:hidden和border-radius，子元素超出部分不隐藏问题？

发表于 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet"type="text/css" href="css/SB.css" />
        <style type="text/css">
            .main {
                width: 300px;
                height: 100px;
                border: 1px solid red;
                border-radius: 15px;
                overflow: hidden;
                /*transform:rotate(0deg); */
            }

            .con {
                display: block;
                overflow: scroll;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                white-space: nowrap;
                font-size: 0px;
            }

            .item {
                width: 100px;
                height: 100px;
                background: green;
                display: inline-block;
                position: relative;
            }

            .item:nth-child(2n) {
                background: red;
            }
            .item p{
                width: 50px;
                height: 20px;
                color: white;
                text-align: center;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 0px;
                background: blue;
                font-size: 12px;
            }
        </style>
    </head>

    <body>
        <div class="main">
            <div class="con">
                <div class="item">
                    <p>快点</p>
                </div>
                <div class="item">
                    <p>快点</p>
                </div>
                <div class="item">
                    <p>快点</p>
                </div>
                <div class="item">
                    <p>快点</p>
                </div>
                <div class="item">
                    <p>快点</p>
                </div>
            </div>
        </div>
    </body>

</html>
复制代码

PC

移动端


解决办法：

.main {
                width: 300px;
                height: 100px;
                border: 1px solid red;
                border-radius: 15px;
                overflow: hidden;
                transform:rotate(0deg);  /*transform: scale(1);也可以*/
            }
复制代码