在我基于Cordova的应用程序中,我有一个div,该div应该显示英国车牌的图形表示。
它应该是这样的:
(它在iOS上的显示方式-Cordova ver 3.8)
但是,在Android的Cordova 4.1.1版中,它看起来像这样:
该代码段如下所示,展示了该问题。任何帮助将非常感激。
.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>
.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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句