絶対配置された要素が相対div内に正しく配置されていない

Question

私のCordovaベースのアプリケーションでは、英国ライセンスプレートのグラフィック表現を表示するはずのdivがあります。それは次のように表示され、 - （コルドバ3.8のverそれはiOSの上でどのように表示するか）

しかし、Android上で、コルドバを4.1.1のver

を：

は、これは見えるようになっています方法です代わりに、この：

問題を実証し、次のようにスニペットがあります。どんな助けでも大歓迎です。

.registration-plate-container { 
 
    text-align: center; 
 
} 
 

 
.registration-plate-ui { 
 
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%); 
 
    padding: .25em 1em .25em 1.75em; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    border-radius: 5px; 
 
    border: 1px solid #000; 
 
    box-shadow: 1px 1px 1px #ddd; 
 
    position: relative; 
 
    font-family: helvetica, ariel, sans-serif; 
 
} 
 

 
.registration-plate-ui:before { 
 
    content: 'GB'; 
 
    display: block; 
 
    width: 30px; 
 
    height: 100%; 
 
    background: #063298; 
 
    position: absolute; 
 
    top: 0; 
 
    border-radius: 5px 0 0 5px; 
 
    color: #f8d038; 
 
    font-size: .5em; 
 
    line-height: 85px; 
 
    padding-left: 5px; 
 
} 
 

 
.registration-plate-ui:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 7px; 
 
    left: 5px; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 30px; 
 
    border: 1px dashed #f8d038; 
 
}

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>

Answer 1

.registration-plate-container { 
 
    /* text-align: center; */ /* throws off position property centering */ 
 
    position: relative;  /* this is the actual container element, 
 
           so set the boundaries here for abspos children */ 
 
    height: 75px;   /* for demo only */ 
 
    border: 1px dashed red; /* for demo only */ 
 
} 
 

 
.registration-plate-ui { 
 
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%); 
 
    padding: .25em 1em .25em 1.75em; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    border-radius: 5px; 
 
    border: 1px solid #000; 
 
    box-shadow: 1px 1px 1px #ddd; 
 
    position: absolute;   /* changed from 'relative` */ 
 
    left: 50%;     /* center horizontally */ 
 
    transform: translateX(-50%); /* center fine-tuning */ 
 
    font-family: helvetica, ariel, sans-serif; 
 
} 
 

 
.registration-plate-ui:before { 
 
    content: 'GB'; 
 
    display: block; 
 
    width: 30px; 
 
    height: 100%; 
 
    background: #063298; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0;    /* tell it where to go */ 
 
    border-radius: 5px 0 0 5px; 
 
    color: #f8d038; 
 
    font-size: .5em; 
 
    line-height: 85px; 
 
    padding-left: 5px; 
 
} 
 

 
.registration-plate-ui:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 7px; 
 
    left: 5px; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 30px; 
 
    border: 1px dashed #f8d038; 
 
}

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>