html - 输入字段文本，仅在 IOS 上更改样式

Question

我有一个问题，我的输入字段中的文本看起来像这样，但仅限于 IOS。当我开始在字段中输入时，一切正常..

它看起来不错，在 android 和桌面上，只有 ios 似乎会导致问题。

解决此问题的任何提示将不胜感激。

代码:

html:

<div class="search-overlay">
        <div class="search-input" role="search">
            <input placeholder="Søg på titel" name="query" data-quick-search="" id="search-programs-input"
                type="text" class="" value="" autocomplete="off"><button type="submit" class="dr-icon-search search-input-icon form-control-feedback"><span class="sr-only">{{dictionary "search" "Title"}}</span></button>
            <button type="button" class="close close-search" data-quicksearch-close=""><span class="dr-icon-close" aria-hidden="true"></span><span class="sr-only">{{dictionary "mainNavigation" "closeSearch"}}</span></button>

        </div>
    </div>

样式:

.search-overlay {
    background-color: white;
    height: 75px;
    position: absolute;
    top: -75px;
    width: 500px;
    right: 5px;
    z-index: 900;
    border: 1px solid #ccc;
    .search-input {
        padding: 15px;
        padding-left: 20px;
        input {
            background: #E5E5E5;
            width: 92%;
            font-size: 24px;
        }
        button {
            border: none;
            background: transparent;
            &[class*=dr-icon-search] {
                position: absolute;
                right: 55px;
                top: 23px;
                &:before {
                    font-size: 25px;
                    color: gray;
                }
            }
            .dr-icon-close {
                position: absolute;
                right: 14px;
                top: 23px;
                &:before {
                    font-size: 15px;
                    color: gray;
                }
            }
        }
    }

}

Answer 1

在我的输入中添加 Line-height:24px; 解决了这个问题...