|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-10-23
在多个标签不是紧凑连接, 而是存在空格或或换行符的情况下, 例如
<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值. 大家都是怎么解决这个问题的. 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-10-23
用padding做视觉分隔
|
| 返回顶楼 | |
|
发表时间：2009-10-23
有时候 为了让代码看起来规整, 适当的加入换行是常见的做法.
如何在加入换行的情况下 避免楼主提出的这个bug 确实是个有趣的问题哦. to lifesinger: 你的方案其实 是从另一个方面绕开了 楼主的问题. 也就是说 按你的做法 楼主必须要把那些 span写到一行里. 如果span特别多 每个又很长, 那代码就显得凌乱了. 如我前面所说, 在不去掉各个span之间的那些换行符时 要如何解决楼主的问题 才是楼主关心的吧. 我简单测试了一下 别说隐藏 span2 就是把他remove了 在IE6里 都会出现双重间距的问题. 浏览器会自动合并各个html标签之间的 连续空字符, 显然 在IE里 不管你对span2 做什么, 它都认为 span1之后 以及span3之前 的空字符 不是连续的. 这个怎么解决呢. 我也不知道答案 坐等完美解决方案. 期待高手出现 |
| 返回顶楼 | |
|
发表时间：2009-10-23
没有换行符号或空白的情况下, 采用
span[style*="display:none"]{margin-left:10px;}
也是可以解决问题的, 当然IE可以还需要增加额外的选择器. 刚才有朋友给出了个方案, 采用了float:属性, span{ float: left; margin-right10px;}
倒是可以解决这个问题. 不过不同的使用场景, 也可能带来些问题. |
| 返回顶楼 | |
|
发表时间：2009-10-23
最后修改：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下是有效的 |
| 返回顶楼 | |
|
发表时间：2009-10-23
支持 keshin 的方法
楼主的 做法不妥当 因为 一个空字符 到底是不是10px 这个在不同环境下是不一定的. |
| 返回顶楼 | |
|
发表时间：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 |
| 返回顶楼 | |
|
发表时间：2009-10-23
最后修改：2009-10-23
fins 写道 支持 keshin 的方法
楼主的 做法不妥当 因为 一个空字符 到底是不是10px 这个在不同环境下是不一定的. 使用了float:left属性后, 原先的间隙(一个空格宽度)已经没有了, 增加的 span {margin-left: 10px;}
是为了在span间增加间隙, 这个间隙是否等于1个空格的宽度不重要. keshin的方法需要修改标签中的style属性, 在需要动态改变标签是否显示的情况下, 会带来了些额外的代码. 在span的属性多的情况下, 这些操作相应的代码还是不少的. ps: span只是为了方便举例使用的, 我主要是要用上struts2的s:submit 标签上. To 冯冀川: 这个方案我也考虑过, 但还是需要额外的js代码. |
| 返回顶楼 | |
|
发表时间：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类，那么额外代码的问题也就不存在了
|
| 返回顶楼 | |
|
发表时间：2009-10-23
To keshin:
我以为display:none, 是framework中代码生成出来的. 实际上是自定义标签后生成出来的. 这种情况下, 你的方案更好点. |
| 返回顶楼 | |
