0

我目前有一个位于文本框侧面的搜索“按钮”，如下图所示，这在 chrome 和 firefox 中呈现良好。

在此处输入图像描述

在 IE9 中是这样渲染的。

IE 渲染

有没有人遇到过类似的问题？我怎样才能解决这个问题？

搜索按钮的 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);
}

编辑：该错误似乎与我的页面在花式框内呈现有关。IE9 并没有在花式框之外以相同的方式处理内联块。

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

4

2 回答 2

0

IE 对 inline-block 的支持在 IE8+ 中得到了更好的支持。这听起来像您正在以兼容模式呈现，这基本上意味着像 IE7 一样呈现此页面（或更糟 - 怪癖模式）。

你是在声明 DOCTYPE 吗？尝试将此添加到您的 html 文件的顶部：

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

这应该迫使它使用可以正确执行内联块的 IE9 渲染。

于 2012-05-23T16:03:48.300 回答
0

这是一个问题，因为 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 声明。

于 2012-05-23T16:02:07.030 回答