css 动画比例不适用于 chrome

Question

/* HTML */这是 html 部分。

 <div class="second-menu-2-container">
        <div class="second-menu-2">
            <a href="#">Home</a>
            <a href="#">world</a>
            <a href="#">Tech</a>

        </div>    
    </div>

/* CSS 3 */这是 CSS 3 部分。我把<a>标记一些悬停比例变换，但不起作用。

 .second-menu-2-container {
            background-color: #A91717;
            width: 100%;
        }


 .second-menu-2 {
            width: 1000;
            margin: 0 auto;
            height: 30px;

        }
 .second-menu-2 a {
            transition: all 2s ease-in-out;  
            color: white;
            text-decoration: none;
            position: relative;
            top: 8px;
            padding: 0 10px;
            border-right: 1px solid #E4E4E4;
            font-weight: 100;   

        }

  .second-menu-2 a:hover {
            transform: scale(2);

        }

这是 jsfiddle 地址:https://jsfiddle.net/libaoming/xg692wy3/

Answer 1

您需要在转换后的元素上添加 display: block; 或 display: inline-block; 才能使其正常工作。查看工作 fiddle :https://jsfiddle.net/matikucharski/xg692wy3/3/