html - 输入文本上的 css 文本缩进在 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和 aline-height以及该text-indent规则也可以解决此问题。这对于 IE7-9 来说也是一个老把戏。

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

行得通。

如果您使用的是流动或响应宽度，并且您不想因为填充而调整输入的宽度，这很好。