Question

我使用Phonegap开发的Android应用程序，因此我的大部分UI都是通过Javascript / CSS / HTML完成的。我一直在对应用程序进行一些UI更改，以使其更具可用性，并使代码更易于维护。我遇到了一些麻烦，但在Android 4.4上，CSS margin属性对我的一个视图无法正常工作。以下是显示差异的图像：

Android 4.1

Android 4.4

正如您所看到的，4.4中的边距似乎被压扁了。这是jsfiddle我的代码：

<style>
.grid_parent {
    width:800px;
    height:8.5em;
    background-color:#e8e8e8;
    border:1px solid;
}
.grid_row {
    text-align:center;
    clear:left;
}
.grid_first_row {
    margin:1% 5%;
}
.grid_second_row {
    margin:1% 3.33%;
}
.grid_item {
    display:table;
    float:left;
    width:10%;
}
.grid_button {
    display:inline-block;
    width:60%;
}
</style>

<body>
    <div class="grid_parent">
        <div class="grid_row">
            <div class="grid_item grid_first_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_first_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_first_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_first_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_first_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
        </div>
        <div class="grid_row">
            <div class="grid_item grid_second_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_second_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_second_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_second_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_second_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
            <div class="grid_item grid_second_row">
                <img class="grid_button" src="https://cdn1.iconfinder.com/data/icons/material-core/18/check-box-outline-blank-512.png">
            </div>
        </div>
    </div>
</body>

我怀疑这是由于Android 4.4使用new Webview，但似乎这是错误的行为。我错了吗？我该如何解决这个问题？目前我正在使用padding用于Android 4.4，但我想统一预先KitKat和后KitKat版本的样式，因为padding并不像margin那样使我的图标居中确实

Android 4.4 Webview上的保证金属性显示不正确

0 个答案: