Question

我创建了一个带背景图片的文本框。该代码在Firefox中正常工作，但它在IE9中非常糟糕且未对齐。这是我创建的代码：

<input type="text"class="tbox" />

.tbox
{
    height:40px;
    width:290px;
    padding-left:5px;
    padding-right:46px;
    background:url(user-image2.jpg) no-repeat right;
    background-size:40px 35px;
    border:2px solid rgba(128,255,0,1);
    position:relative;
}

任何人都可以帮我解决哪种代码适用于所有类型的浏览器..

Answer 1

有几条评论指出它可能是兼容模式。它也可以是Quirks模式。这似乎是一个非常可能的原因，因为你引用的CSS应该在IE9中完全正常。

要检查浏览器的模式，请按F12以显示开发工具窗口。该模式应显示在此窗口的右上角。如果它处于IE7或IE8模式或怪癖模式，应该相当清楚。 IE9标准以外的任何内容都将成为您的问题。

所以现在的问题是如何避免浏览器使用错误的模式。

有几个原因可以选择错误的模式。

Quirks Mode - 这是IE5兼容模式。这将使您的页面看起来非常错误。 IE9进入怪癖模式的最常见原因是，如果您忘记在页面顶部添加<!DOCTYPE>声明，或者它在那里但是无效。

通过确保HTML代码的第一行如下来解决此问题：
```
<!DOCTYPE html>
```
IE7 / 8兼容模式 - 如果IE9认为页面有错误暗示应该使用它们或者用户已将浏览器配置为执行，则IE9有时会进入兼容模式所以。您应该通过W3C Validator运行HTML代码并更正它所拾取的任何错误;这可能会有所帮助。

您还可以尝试通过包含元标记强制IE使用其最佳可用渲染模式，如下所示：
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```

将其放入HTML的<head>部分。这将告诉IE尽可能避免使用兼容模式。

希望有所帮助。

IE9中的背景图像无法正常工作

1 个答案: