修复浏览器之间的差异

Question

我刚刚创建了一个新的日历功能，但我遇到了按钮问题。在Firefox中，它看起来不错，但在Chrome中看起来很糟糕。

以下是一些您可以看到差异的图片：

火狐

铬

也许你知道如何解决这个问题。

HTML

<div class="controls input-append date form_datetimee" data-date="1979-09-16T05:25:07Z" data-date-format="yyyy/M/dd" data-link-field="dtp_input1">
    <input size="16" type="text" name="end_date" value="<?php echo $NewLogEndData; ?>" readonly/>
        <span id="extro" class="add-on"><i class="icon-th"></i></span>
</div>

CSS

.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
    border-radius: 0px 4px 4px 0px;
}
.input-append .add-on,
.input-append .btn,
.input-append .btn-group {
    margin-left: -1px;
    margin-top: 2px;
}
.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn,
.input-append .btn-group > .dropdown-toggle,
.input-prepend .btn-group > .dropdown-toggle {
    vertical-align: top;
}
.input-append .add-on,
.input-prepend .add-on {
    display: inline-block;
    width: auto;
    min-width: 16px;
    padding: 1px 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    text-shadow: 0px 1px 0px #FFF;
    background-color: #EEE;
    border: 1px solid #999;
}
.input-append,
.input-prepend {
    white-space: nowrap;
}

Answer 1

没有看到整个代码，但尝试添加此代码：

input {
  height: 20px; /* same as line-height */
  -moz-appearance: none;
  -webkit-appearance: none;
}