dispay:none 属性在IE6, 7,8 使用中的小缺陷

在多个标签不是紧凑连接, 而是存在空格或或换行符的情况下, 例如

<span id="span1">操作1</span>
<span id="span2">操作2</span>
<span id="span3">操作3</span>
<span id="span3">操作4</span>

当需要隐藏一个或多个span的情况下, 在span控件上增加属性style="display:none",
以span2为例:

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

IE6,7,8 中显示(操作1, 操作3之间存在两个空格)

操作1  操作3 操作4

Firefox显示为(操作1, 操作3之间只存在一个空格)

操作1 操作3 操作4

目前有个思路就是 做个只针对IE的css定义, 使用margin-left 属性. 同时将span设定class为clrBlank.

   * html .clrBlank{
	margin-left:-10px;
  }

但是操作起来还是比较麻烦, 而且在不知道隐藏几个控件的情况下, 还需要使用js进行动态改变style中的margin-left值.

大家都是怎么解决这个问题的.

评论

20 楼 422759366 2009-12-25  

写个servlet过滤器，清理掉这些讨厌的空格换行。

19 楼 achun 2009-11-20  

我这里有一个提议，没有经过测试，那就是
采用unix风格的文档换行
pc 风格换行是\r\n
unix风格是 \n
楼主用编辑器转换一下看看能不能解决问题

18 楼 风雪涟漪 2009-11-11  

我的做法是。定义两个class.
.ui-hidden{
display: none;
}
.ui-remove{
position: absolute; left: -99999999px;
}

遇到这种情况 使用 第二种方式。。

17 楼 DeadFire 2009-10-27  

我觉得最实际和根本的解决方法就是把代码连起来。

16 楼 ldinh 2009-10-26  

<style type="text/css">
ul#op li {display:inline;}
</style>
<ul class="op">
    <li></li>
    <li style="display:none;"></li>
    <li></li>
</ul>

必须用span的话，用style="display:none;position:absolute;"和style="display:inline;position:static;"转换也不错。

15 楼 keshin 2009-10-26  

sankxuan 写道

keshin 写道

sankxuan 写道

最简单的方法是这么写

<span id="span1">操作1</span><span
id="span2">操作2</span>

以前myeclipse的代码format就是这么做的
在<span后面换行

当然不是所有的都要这么写，大部分span都不要做效果变化的

如果是作为代码生成用途，比如用taglib连续生成多个tag，我很赞同用这种方式，但如果是手写，这么做的坏处不比好处少

坏处在哪里？因为你没这么写过，而且不是所有的<span>或者<div>都需要这么写，只要那些需要做效果变化的部分，总比margin这些尾巴要舒服的多

而且也兼顾了换行，不至于代码所有的在同一行。

对比所有楼上给出的解决方案，个人认为这是最方便的一种。而且这个问题在web开发中间已经是老问题了，否则，myeclipse也不会采用这种format的形式

呵呵，我是这么写过的，结果，后来这个代码，由于我忘了写注释提醒，结果被一个有洁癖的后来者给format了一下，于是问题又重现了，当然你可以说我没写注释，或者说后来者手痒欠扁，但是，这种写法的随意性过大也是一个事实。
当然，个人观点，看过就好

14 楼 hax 2009-10-26  

其实可以用“position:absolute; width:0; height:0; overflow:hidden;” 来替代 display:none ，好处是在IE4下面也能work（当然这没啥实际用处）。

13 楼 Army 2009-10-26  

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

position:absolute也可以。

12 楼 sankxuan 2009-10-26  

keshin 写道

sankxuan 写道

最简单的方法是这么写

<span id="span1">操作1</span><span
id="span2">操作2</span>

以前myeclipse的代码format就是这么做的
在<span后面换行

当然不是所有的都要这么写，大部分span都不要做效果变化的

如果是作为代码生成用途，比如用taglib连续生成多个tag，我很赞同用这种方式，但如果是手写，这么做的坏处不比好处少

坏处在哪里？因为你没这么写过，而且不是所有的<span>或者<div>都需要这么写，只要那些需要做效果变化的部分，总比margin这些尾巴要舒服的多

而且也兼顾了换行，不至于代码所有的在同一行。

对比所有楼上给出的解决方案，个人认为这是最方便的一种。而且这个问题在web开发中间已经是老问题了，否则，myeclipse也不会采用这种format的形式

11 楼 keshin 2009-10-26  

sankxuan 写道

最简单的方法是这么写

<span id="span1">操作1</span><span
id="span2">操作2</span>

以前myeclipse的代码format就是这么做的
在<span后面换行

当然不是所有的都要这么写，大部分span都不要做效果变化的

如果是作为代码生成用途，比如用taglib连续生成多个tag，我很赞同用这种方式，但如果是手写，这么做的坏处不比好处少

10 楼 sankxuan 2009-10-25  

最简单的方法是这么写

<span id="span1">操作1</span><span
id="span2">操作2</span>

以前myeclipse的代码format就是这么做的
在<span后面换行

当然不是所有的都要这么写，大部分span都不要做效果变化的

9 楼 konant 2009-10-23  

To keshin:
我以为display:none, 是framework中代码生成出来的. 实际上是自定义标签后生成出来的. 这种情况下, 你的方案更好点.

8 楼 keshin 2009-10-23  

konant 写道

fins 写道

支持 keshin 的方法
楼主的 做法不妥当

因为 一个空字符 到底是不是10px 这个在不同环境下是不一定的.

使用了float:left属性后, 原先的间隙(一个空格宽度)已经没有了, 增加的

span {margin-left: 10px;} 

是为了在span间增加间隙, 这个间隙是否等于1个空格的宽度不重要.

keshin的方法需要修改标签中的style属性, 在需要动态改变标签是否显示的情况下, 会带来了些额外的代码.
在span的属性多的情况下, 这些操作相应的代码还是不少的.

ps: span只是为了方便举例使用的, 我主要是要用上struts2的s:submit 标签上.

To 冯冀川: 这个方案我也考虑过, 但还是需要额外的js代码.

直接写在style里是因为见lz的代码也是直接写在行内 ，个人更加倾向将这段定义未css类，那么额外代码的问题也就不存在了

7 楼 konant 2009-10-23  

fins 写道

支持 keshin 的方法
楼主的 做法不妥当

因为 一个空字符 到底是不是10px 这个在不同环境下是不一定的.

使用了float:left属性后, 原先的间隙(一个空格宽度)已经没有了, 增加的

span {margin-left: 10px;} 

是为了在span间增加间隙, 这个间隙是否等于1个空格的宽度不重要.

keshin的方法需要修改标签中的style属性, 在需要动态改变标签是否显示的情况下, 会带来了些额外的代码.
在span的属性多的情况下, 这些操作相应的代码还是不少的.

ps: span只是为了方便举例使用的, 我主要是要用上struts2的s:submit 标签上.

To 冯冀川: 这个方案我也考虑过, 但还是需要额外的js代码.

6 楼 冯冀川 2009-10-23  

var _span = document.getElementById('span2');
while(_span.nextSibling && _span.nextSibling.nodeType != 1) {
    _span.nextSibling.parentNode.removeChild(_span.nextSibling);
}
_span.style.display = 'none';

查找一下要隐藏元素的下一个元素是否不是Element节点，如果不是的话，将其删掉，这样也许也是个办法
参考：http://www.w3school.com.cn/xmldom/prop_node_nextsibling.asp

5 楼 fins 2009-10-23  

支持 keshin 的方法

楼主的 做法不妥当

因为 一个空字符 到底是不是10px 这个在不同环境下是不一定的.

4 楼 keshin 2009-10-23  

konant 写道

没有换行符号或空白的情况下, 采用

span[style*="display:none"]{margin-left:10px;}

也是可以解决问题的, 当然IE可以还需要增加额外的选择器.

刚才有朋友给出了个方案, 采用了float:属性,

 span{ float: left; margin-right10px;}

倒是可以解决这个问题. 不过不同的使用场景, 也可能带来些问题.

这样如何？

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

测试在ie6下是有效的

3 楼 konant 2009-10-23  

没有换行符号或空白的情况下, 采用

span[style*="display:none"]{margin-left:10px;}

也是可以解决问题的, 当然IE可以还需要增加额外的选择器.

刚才有朋友给出了个方案, 采用了float:属性,

 span{ float: left; margin-right10px;}

倒是可以解决这个问题. 不过不同的使用场景, 也可能带来些问题.

2 楼 fins 2009-10-23  

有时候 为了让代码看起来规整, 适当的加入换行是常见的做法.

如何在加入换行的情况下 避免楼主提出的这个bug 确实是个有趣的问题哦.


to lifesinger:

你的方案其实 是从另一个方面绕开了 楼主的问题.
也就是说 按你的做法 楼主必须要把那些 span写到一行里.
如果span特别多 每个又很长, 那代码就显得凌乱了.

如我前面所说, 在不去掉各个span之间的那些换行符时 要如何解决楼主的问题 才是楼主关心的吧.

我简单测试了一下 别说隐藏 span2  就是把他remove了 在IE6里 都会出现双重间距的问题.

浏览器会自动合并各个html标签之间的 连续空字符, 显然 在IE里 不管你对span2 做什么, 它都认为 span1之后  以及span3之前 的空字符 不是连续的.

这个怎么解决呢.
我也不知道答案 坐等完美解决方案. 期待高手出现

1 楼 lifesinger 2009-10-23  

用padding做视觉分隔