Firefox 在使用 display: inline-block 时中断；答案

【问题标题】：Firefox breaking up from when using display: inline-block;Firefox 在使用 display: inline-block 时中断；
【发布时间】：2013-03-14 09:52:05
【问题描述】：

我目前遇到一个奇怪的跨浏览器问题。

2.5 秒后，一个表单进入。这在 IE 和 Chrome 中运行良好，但在 FF 中不知何故。这是 HTML 部分

<div id="holder"><a href="javascript:void(0);" id="main"></a></div><div id="dropDiv"><form>
<input class="geld-input" type="text" name="email" value="Vul hier je e-mail in en krijg direct toegang tot de geheime pagina..." value="Vul hier je e-mail in en krijg direct toegang tot de geheime pagina..." onclick="if(this.value=='Vul hier je e-mail in en krijg direct toegang tot de geheime pagina...')this.value='';this.focus();" onblur="if(this.value=='')this.value='Vul hier je e-mail in en krijg direct toegang tot de geheime pagina...';" tabindex="501"  /><input class="geld-submit" type="submit" value="Krijg Direct Toegang" /></form></div></div>

这里是 CSS 部分：

#holder { position: absolute; top: 550px;  margin:0 auto; width:100%; display: inline-block;}
#dropDiv {
 display: none;
 position: absolute;
 top: -20px;
}

现在，如果我删除#holder div 上的“display:inline-block”部分，那么它在 FF、IE 中有效，但在 chrome 中无效。

如果您想查看完整源代码：http://www.luukratief.com/lander

有人能告诉我制作这个跨浏览器的方法吗？

【问题讨论】：

请在您的帖子中包含代码。您的问题依赖于指向实时代码的外部链接是不可接受的，一旦您找到修复程序就会更改该链接。即使您解决了问题，您的问题也需要保持相关性。
@meagar 我真的很抱歉。自从我使用stackoverflow以来已经有一段时间了。我现在包含了 HTML 代码和 CSS 代码。这够了吗？

标签： css google-chrome firefox

【解决方案1】：

您没有在#holder 上设置left 值。这意味着使用了静态位置，但规范并没有完全定义在各种边缘情况下是什么。此外，浏览器的计算方式不同，具体取决于最容易实现的方式，因为规范并没有定义行为。

你可能想做left: 0之类的事情。

【讨论】：