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

现在，如果删除#holder div上的“display：inline-block”部分，那么它可以在FF，IE中使用，但不能在chrome中使用。

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

有人能告诉我们要采用什么方法来制作这种跨浏览器？

Answer 1

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

您可能希望执行left: 0之类的操作。

Firefox在使用display时分手：inline-block;

1 个答案: