Question

我目前有一个搜索“按钮”，我坐在文本框的一侧，如下图所示，这在chrome和firefox中渲染得很好。

enter image description here

在IE9中，它会像这样呈现。

IE Render

有没有人遇到过类似的问题？我怎么能绕过这个？

搜索按钮的CSS是：

    .txtSearchBtn
{
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    left: -20px;
    top: 5px;
    cursor: hand;
    cursor: pointer;
    background-image: url(../Images/magnifier.png);
}

编辑：错误似乎与我在fancybox内部呈现的页面有关。 IE9并没有以同样的方式处理内联块。

编辑2：找出问题所在。我的最大宽度设置没有足够的空间容纳文本框和图像，即使我将图像-20px向左移动，因此IE将其呈现在上面的行上。

Answer 1

由于IE无法识别属性

，这是一个问题

display: inline-block;

IE浏览器会以内联方式显示它，为了达到预期效果，您需要使用

来提供内容“布局”

zoom: 1;
display: inline;

或类似。

这篇文章对我有帮助，请查看以完全理解我想说的内容！

http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html

编辑：如果你只是试图掩盖你的背影到IE9并且不能少，那么@Porco已经覆盖了正确的DOCTYPE声明。

Answer 2

在IE8 +中，IE对内联块的支持变得更好。这听起来像是在兼容模式下渲染，这基本上意味着渲染这个页面就像你是IE7（或者更糟 - Quirks模式）。

你是在申报DOCTYPE吗？尝试将其添加到html文件的顶部：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

这应该强制它使用IE9渲染，它可以正确地进行内联阻塞。

元素的内联块

2 个答案: