縮放問題在CSS？

Question

我有以下代碼：

<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）似乎是更高父母，在某些情況下，孩子似乎更短。

我怎樣才能解決這個問題變焦？

Answer 1

DEMO Codepen

在這裏，我已修改了代碼：

* { 
 
\t -moz-box-sizing: border-box; 
 
\t -webkit-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
html { 
 
\t position: relative; 
 
\t margin: 2%; 
 
\t overflow: hidden; 
 
\t width: 540px; 
 
} 
 

 
html h1 { 
 
\t max-width: 100%; 
 
\t text-align:center; 
 
\t -moz-transition: all 0.3s; 
 
\t -webkit-transition: all 0.3s; 
 
\t transition: all 0.3s; 
 
} 
 

 
html:hover h1 { 
 
\t -moz-transform: scale(1.1); 
 
\t -webkit-transform: scale(1.1); 
 
\t transform: scale(1.1); 
 
} 
 

 
h1 { 
 
\t margin: 50px; 
 
\t display:inline-block; 
 
\t position:relative; 
 
\t z-index:1; 
 
\t padding:10px 50px 10px; 
 
\t color:red; 
 
\t border: 1px solid #ccc; 
 
\t background: #fff; 
 
} 
 

 
h1:before { 
 
\t content:''; 
 
\t width:100%; height:100%; 
 
\t position:absolute; 
 
\t top:-1px; left:0; 
 
\t background:red; 
 
\t z-index:-1; 
 
\t border: 1px solid #ccc; 
 
\t -webkit-transform: skewX(-20deg); 
 
\t -ms-transform: skewX(-20deg); 
 
\t transform: skewX(-20deg); 
 
\t -webkit-transform-origin:0 0; 
 
\t -ms-transform-origin:0 0; 
 
\t transform-origin:0 0; 
 
\t background: #fff; 
 
}

<h1>Some data</h1>