输入文本上的CSS text-indent在Internet Explorer 10中不起作用

Question

我正在尝试使用css自定义文本输入,我希望其中的文本左边有10px的边距,所以我使用:

#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}

它适用于所有浏览器,除了IE10似乎忽略了text-indent属性,我该如何解决？

<input type="text" id="text" />

Answer 1

你可以使用padding-left,它适用于所有浏览器:

#text {
    padding: 0 0 0 10px;
    border: 1px solid #333;
    outline: none;
    margin: 0;
    width: 158px; //decrease width with the same padding vale so that the width would stay the same
    height: 20px;
    border-radius: 4px;
}

Answer 2

如果要对IE使用特殊规则,则添加display: inline-block和a line-height以及text-indent规则也将解决此问题.对于IE7-9来说,这也是一个老技巧.

input.special {
    text-indent: 150px;
    display:inline-block;
    line-height: 18px;
}

诀窍.

如果您使用液体或响应宽度并且您不希望由于填充而需要调整输入的宽度,这是很好的.