当焦点在chrome中的输入（文本）时移动文本

Question

我正在构建一个名为AppStore-Icons的网站，其中包含一个搜索框，搜索框的内容会在焦点上上下移动，如下所示：

我只在 Chrome 中发现此问题，并且仅在网站的阿拉伯语版本中，我尝试通过添加此CSS来修复此问题：

    tinyMCE.init({
        selector: 'textarea',
        toolbar: " example",
        setup: function (ed) {                                
            ed.addButton('example', {
                type: 'menubutton',
                title: 'Insert Latest Newsletter Link',
                icon: false,
                text: 'Insert Latest Newsletter Link',
                menu: [{text: "Insert Link", onclick: function () {
                    //this is where i want to retrieve data that
                    //i associated with my button
                } }]
            });
        }

但没有任何效果，怎么能修好？

Link to the Arabic version of the website

提前致谢..

Answer 1

我通过添加以下CSS解决了这个问题：

.search_box input[type="text"]{
    overflow: hidden;   //so the text won't move
    padding-bottom: 0;  //so the text won't be cut
    font-size: 34px;    //so the text will be contained in the input border
}

真正的问题是我使用的阿拉伯字体有很高的高度，问题显示焦点，因为 Caret （闪烁的书写光标），其高度等于字体的字符高度（仅限铬）

Answer 2

尝试在.search_box input[type="text"]

上设置此项

line-height:65px;