Firefox breaking up from when using display: inline-block;

Question

我现在有一个奇怪的跨浏览器问题。

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;
}

现在如果我删除#holderdiv上的"display:inline-block"部分，那么它在FF, IE中工作，但在chrome中不工作。

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

谁能告诉我怎么做才能让这个跨浏览器?

Answer 1

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

你可能想做一些像left: 0。