jQuery在简单的show()和hide()函数的引擎下使用CSS显示属性.以下
HTML包含三个按钮,每个按钮都包含在< span>标签和所有三个< span>标签放置在父< div>容器.在页面加载中,< span>标签是使用jQuery hide()隐藏的,而在稍后的某个时刻,它们使用show()函数显示. HTML现在处于以下状态,< span>标签已收到样式值显示：块.
<div style="text-align:right; width:100%;">
<span style="display:block">
<input type="button" value="Button1" />
</span>
<span style="display:block">
<input type="button" value="Button2" />
</span>
<span style="display:block">
<input type="button" value="Button3" />
</span>
</div>
在Firefox(3.5)中,跨度元素垂直堆叠在彼此的顶部,而在IE中它们是内联的.我会在两台浏览器中预期后者,因为我认为跨标签的默认布局是内联的.
如果我手动将样式从display：block更改为显示：inline;它在Firefox中看起来正确.基本上,当显示一个元素时,jQuery正在使用一个不总是有效的显示值.添加显示：块;足以显示元素,但不足以显示我需要的内联布局.
所以,对我的问题：
这是jQuery的一个已知问题吗？我使用的是jQuery 1.2.6.
>以前有没有人经历过这个问题,你是如何解决的？
解决方法
起初,从响应中可以看出,如果我想要一个除block以外的显示值,则使用show / hide函数是不可能的.
但是,我注意到,当< span>标签处于隐藏状态,jQuery已经为每个标签添加了一个名为oldBlock的属性.然后我意识到这是在元素被隐藏时临时存储显示CSS值,以便在再次显示元素时可以恢复适当的值.
因此,我必须做的是在隐藏元素之前设置适当的显示值.
初始状态：
<div style="text-align:right; width:100%;">
<span style="display:inline">
<input type="button" value="Button1" />
</span>
...
</div>
调用.hide()将我们带到这个状态：
<div style="text-align:right; width:100%;">
<span style="display:none" oldBlock="inline">
<input type="button" value="Button1" />
</span>
...
</div>
调用show()使我们回到这个状态：
<div style="text-align:right; width:100%;">
<span style="display:inline">
<input type="button" value="Button1" />
</span>
...
</div>
主要的问题是我没有提供< span>元素在我的初始状态下显示的值.因此,它们将隐含地接收浏览器默认值,这似乎是我预期的内联.但是,如果在调用hide()函数之前显式设置显示值,jQuery将只使用oldBlock属性.如果没有oldBlock属性,则show()函数使用块的默认值.