我有以下代码:
<h1>Some data</h1>
h1{
margin: 50px;
display:inline-block;
position:relative;
z-index:1;
padding:10px 50px 10px;
color:red;
border: 1px solid #ccc;
background: #fff;
}
h1:before{
content:'';
width:100%; height:100%;
position:absolute;
top:-1px; left:0;
background:red;
z-index:-1;
border: 1px solid #ccc;
-webkit-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
background: #fff;
}
https://jsfiddle.net/gyvprwex/25/
问题是当我缩小(在Chrome和IE 11上)时,在某些情况下,孩子(:before
)似乎高于父母,在某些情况下,孩子似乎更短。
如何修复此缩放问题?
答案 0 :(得分:0)
DEMO Codepen
在这里,我修改了你的代码:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
position: relative;
margin: 2%;
overflow: hidden;
width: 540px;
}
html h1 {
max-width: 100%;
text-align:center;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
html:hover h1 {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h1 {
margin: 50px;
display:inline-block;
position:relative;
z-index:1;
padding:10px 50px 10px;
color:red;
border: 1px solid #ccc;
background: #fff;
}
h1:before {
content:'';
width:100%; height:100%;
position:absolute;
top:-1px; left:0;
background:red;
z-index:-1;
border: 1px solid #ccc;
-webkit-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
background: #fff;
}
&#13;
<h1>Some data</h1>
&#13;