CSS下关于span的显示错误修正

  今天在浏览帖子时候,无意间看到一个css关于span的问题(当然是IE下的)

 

<div>
<span id="span1">操作1</span>
<span id="span2" style="display:none;">操作2</span>  
<span id="span3">操作3</span>  
<span id="span4">操作4</span>  
</div>

 

上述HTML在IE5,6,7下出现的结果是在操作1和操作3之间会有两个空格,而在firefox下却正常显示只有一个。

 

那如何使得IE下也正常显示一个空格呢。

网上给出了很多方法,我摘抄如下:

 

1.最常用的,最简单的

 

<div>
<span id="span1">操作1</span><span
 id="span2" style="display:none;">操作2</span>  
<span id="span3">操作3</span>  
<span id="span4">操作4</span>  
</div>

 看到区别了吗?就是将第二个的span在span处换行即可。

  或者都写在同一行中。

<div>
<span id="span1">操作1</span><span id="span2" style="display:none;">操作2</span><span id="span3">操作3</span><span id="span4">操作4</span>
</div>

 

2.设置CSS,改变定位方式

  

<div>
<span id="span1">操作1</span><span
 id="span2" style="display:none;float:left">操作2</span>  
<span id="span3">操作3</span>  
<span id="span4">操作4</span>  
</div>

 3.替换display:none,好处是在IE4下也能正常工作(虽然如今是没用了)

 

<div>
<span id="span1">操作1</span><span
 id="span2" style="position:absolute; width:0; height:0; overflow:hidden;">操作2</span>  
<span id="span3">操作3</span>  
<span id="span4">操作4</span>  
</div>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值