元素的内联块答案

【问题标题】：Inline-block for element元素的内联块
【发布时间】：2012-05-23 15:57:51
【问题描述】：

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

在 IE9 中是这样渲染的。

有没有人遇到过类似的问题？我该如何解决这个问题？

搜索按钮的 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 对 inline-block 的处理方式与幻想框之外的方式不同。

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

【问题讨论】：

你能用 HTML/CSS/JS 代码创建一个 jsfiddle 来表明你面临的问题吗？
当您找出原因时，将其写成您自己问题的实际答案是好还是坏？很高兴你找到了它！

标签： css internet-explorer-9

【解决方案1】：

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 渲染。

【讨论】：

我尝试将 DOCTYPE 更改为您提供的那个，因为我在其他地方发现这是一个“解决方案”。没有帮助。我不相信我没有处于兼容模式，我确保它没有被检查，我也尝试过不同的机器。此外，我的样式表中的其他地方还有 CSS3 属性，这会让事情看起来很奇怪。
在 IE9 中你应该可以按 F-12 来调出开发者工具栏。检查它呈现页面的浏览器模式和文档模式？
刚刚意识到这可能会有所帮助。这是一个花式盒子里面。我尝试在花式框之外打开页面，它可以正确呈现。
啊，听起来很复杂。我不太确定您所说的 fancybox 是什么意思，但也许您可以将其简化为可以在 jsfiddle 上复制的内容？
这是一个 jquery 插件。我实际上发现我的问题不是 IE9 渲染 CSS 错误，我的宽度太短了。

【解决方案2】：

这是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 声明。

【讨论】：

我知道它没有内联显示它，因为当我将它更改为 display:inline; 时它甚至根本不显示按钮。我会看看你发布的文章，谢谢。
也许也可以在外部 div 上添加一点缩放。如果有疑问，请放大它！
没有这样的运气.. 我不希望比 IE9 更向后兼容。该问题似乎与在花式框中打开此页面有关。当我只是在浏览器中打开页面时，它呈现得很好，但在花式框中打开它会导致这种奇怪的转变