html - 将被父元素transform影响的子元素设为none，但不起作用，是什么原因，F12显示transform：none是正常的。-Questions et réponses sur le réseau chinois PHP

communauté Apprendre Bibliothèque d'outils Loisirs

Français

html - 将被父元素transform影响的子元素设为none，但不起作用，是什么原因，F12显示transform：none是正常的。

怪我咯 2017-04-17 11:46:30

0

2

716

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">    
        body{
            background-color: #eee;
        }
        li{
            list-style: none;
        }
        ul{
            display: flex;
            flex-direction: row;
        }
        ul li{
            width: 234px;
            height: 260px;
            padding:20px 0;
            margin:0 0 14px 14px;
            background-color: #fff;
            text-align: center;
            text-overflow: ellipsis;
            transition: 0.3s box-shadow,
                        0.3s transform;
        }
        ul li>a{
            width: 160px;
            height: 166px;
            margin: 0 37px 18px 37px;
        }
        ul li>a img{
            width: 160px;
            height: 160px;
        }
        ul li h3{
            font-size: 14px;
            color: #212121;
            font-weight: 400;
            line-height: 21px;
            height: 21px;
            margin-bottom: 3px;
        }
        ul li h3 a{
            color: #212121;
        }
        ul li .desc{
            color: #b0b0b0;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;

            margin-bottom: 12px;
        }
        ul li .price{
            color: #ff6709;
            height: 21px;
            line-height: 21px;
        }
        ul li:hover{
            box-shadow: rgba(0, 0, 0, 0.0980392) 0px 15px 30px;
            transform: scale(1.01);
        }
        ul li a,ul li a img,ul li p{
            box-shadow: none;
            transform: none;
        }
        
    </style>
</head>
<body>
            <ul>
                
                <li>
                    <a href="#">
                        <img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
                    </a>
                    <h3>
                        <a href="#">小米路由器3</a>
                    </h3>
                     <p class="desc">四天线设计，更安全稳定</p>
                    <P class = "price">149元</P>
                </li>
                <li>
                    <a href="#">
                        <img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
                    </a>
                    <h3>
                        <a href="#">小米路由器3</a>
                    </h3>
                     <p class="desc">四天线设计，更安全稳定</p>
                    <P class = "price">149元</P>
                </li>
                <li>
                    <a href="#">
                        <img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
                    </a>
                    <h3>
                        <a href="#">小米路由器3</a>
                    </h3>
                     <p class="desc">四天线设计，更安全稳定</p>
                    <P class = "price">149元</P>
                </li>
                <li class="no-mr">
                    <a href="#">
                        <img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
                    </a>
                    <h3>
                        <a href="#">小米路由器3</a>
                    </h3>
                     <p class="desc">四天线设计，更安全稳定</p>
                    <P class = "price">149元</P>
                </li>
                <li>
                    <a href="#">
                        <img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
                    </a>
                    <h3>
                        <a href="#">小米路由器3</a>
                    </h3>
                     <p class="desc">四天线设计，更安全稳定</p>
                    <P class = "price">149元</P>
                </li>
                
            </ul>                
</body>
</html>

怪我咯

走同样的路，发现不同的人生

répondre à tous(2)

PHPzhong2017-04-17 11:48:30 2 plancher

子元素被父元素包裹，父元素进行放大操作，父元素里面的子元素作为一个整体一起放的

Comme +0

Ajouter une réponse

伊谢尔伦2017-04-17 11:48:30 1 plancher

不用写浏览器私有前缀？

Comme +0

Ajouter une réponse

Sujets populaires

Plus>

Articles populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal