Fixing difference between browsers

Question

I just created a new calendar function, but I'm having problems with the button. In Firefox it looks good but in Chrome it looks terrible.

Here are some images where you can see difference:

Firefox

enter image description here

Chrome

enter image description here

Maybe you know how to fix this.

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;
}

• Meowsome: Have you tried to set a specific height for the input?

Answer 1

Haven't seen the whole code, but try adding this:

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