2

我创建了一个带有背景图像的文本框。该代码在 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;
}

谁能帮我编写适合所有类型浏览器的代码..

4

1 回答 1

2

一些评论指出它可能是兼容模式。它也可能是怪癖模式。这似乎是一个很可能的原因，因为您引用的 CSS 在 IE9 中应该非常好。

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

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

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

  • 怪癖模式- 这是一种 IE5 兼容模式。它会使您的页面看起来非常错误。IE9 进入 quirks 模式的最常见原因是如果您忘记<!DOCTYPE>在页面顶部包含声明，或者它存在但无效。

    通过确保 HTML 代码的第一行如下所示来解决此问题：

    <!DOCTYPE html>

  • IE7/8 兼容模式- 如果 IE9 认为页面有错误提示它应该使用它们，或者如果用户已配置浏览器这样做，IE9 有时会进入兼容模式。您应该通过W3C Validator运行您的 HTML 代码并更正它发现的任何错误；这可能会有所帮助。

    您还可以尝试通过包含元标记来强制 IE 使用其最佳可用呈现模式，如下所示：

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

希望有帮助。

于 2013-03-25T10:03:02.247 回答