使用CSS隐藏某些内容而无需使用display:none或JavaScript

27

如何在不使用 display:none 或 JavaScript 的情况下隐藏 div?

在我的国家,很多Blackberry手机默认禁用CSS支持(这里的移动公司对开发者不是很友好)。我有一段文字说:

<div class="BBwarn">
please activate your css support and a link
</div>

当用户启用CSS支持时,我希望隐藏它,但我不能使用display:none;,因为它仅在BB firmware 4.6中受支持。这是一个公共网站,我不能要求所有访问者升级。

有人知道解决方案吗?我希望现在问题更容易理解了。

更新: 感谢大家的回答,但我不能使用

  • position:absolute
  • overflow

因为它们只能在Blackberry firmware 4.6及以上版本中使用。


我知道你想要一个无需 JavaScript 的解决方案,但我不禁想知道为什么不能使用 JavaScript 从 DOM 树中删除元素呢? - Tamas Czinege
JavaScript在同一款手机上默认是禁用的。 - rblanch
19个回答

18

尝试的事情:

  • 使用z-index将其置于其他元素之后
  • 通过绝对定位将其移到屏幕外
  • visbility: hidden
  • 通过将背景设置为前景颜色使内容"不可见"(仅适用于文本)
  • opacity: 0

但真正的问题是:为什么?


因为我希望一旦您激活了CSS,警告就会消失。 - rblanch
1
我用它来进行剪贴板复制,我需要可选择的元素,但隐藏的元素是不可选择的。这就是为什么。 - Galvani
另一个原因可能是为了可访问性。 - L1ghtk3ira
为什么?datetime-local输入框的日期时间格式非常糟糕[没有任何更改的机会],但控件非常好。因此,仅仅因为格式而重新发明轮子是愚蠢的。如果您使用display|visibility隐藏输入框,则无法使用click事件触发它以显示它。因此,通过这个技巧,控件会显示出来,用户可以进行选择,并将值保存回输入标记中。当我捕获到onchange事件时,我可以按照自己的方式格式化我的个性化日期时间字段。 - Peter VARGA
当 display:none 时 offsetHeight 返回0。 - Ulterior

16
这是一种常见的方式:
使用margin-left: -9999;

3
<div class="BBwarn" style="color:red; font-weight:bold; animation: blink 1s linear infinite;"> 请升级您的设备,如果您想让这个消息消失。 </div> - krusty.ar

13

如何尝试:

  visibility: hidden;

那应该会隐藏DIV,(注意它仍将被呈现但不可见,这意味着它将占据文档中的空间,就像它是可见的一样,但是不可见(与display:none;不同,其中div将不会被呈现))。


请参见上面 mfx 和我自己的评论。 - cLFlaVA
是的,我发帖后也注意到了。 - Pim Jager

8
<div style="height:0;width:0;overflow:hidden;">
<!-- content here -->
</div>

顺便提一下,我用以下方法预加载图片,这种方法很好,因为它不使用JavaScript。

使用visibility:hidden并不能达到相同的效果,因为某些浏览器比较聪明,只有在元素实际可见时才会发出请求。


3
为什么这种方法比使用 JavaScript 更好,我不明白?如果没有启用 JS 的用户访问您的网站,他们将下载一堆他们永远也看不到的图片(假设这些图片是用于鼠标悬停、灯箱等效果)。 - nickf

7
为什么不试试简单的方法:
position: absolute;
left: -1000px;

我不明白为什么它不能正常工作。

你不能在低于4.6版本的固件中使用该位置,但还是谢谢。 - rblanch
1
一定要将其设为“-10000px” ;) - AmirHossein Manian

6

我不确定您所说的使用 < 4.6 的百分比是多少,但如果这对您很重要,那么我可以理解接受无法一直取悦所有人的合理性,并且应该可以实现可接受的级联解决方案。可能需要提供一个链接来解释升级和启用 CSS 的好处。

height: 0; 
overflow: hidden;
visibility: hidden; 
color: #fff; 
background: #fff; 

顺便说一句——如果你让别人打开CSS,最好确保你的CSS质量不错… :-)


不错 - 没想到可以使用颜色/背景颜色!也许加上字体大小:1px? - strager
@strager - 我认为这里的主要问题是你应该考虑这个有多重要。如果它非常重要,那么对于已经启用 CSS 的某些用户来说,如果向他们解释清楚,提供一个链接应该不是什么大问题。 - Steve Perks
@Steve Perks 我在考虑这个选项,但这是最后的资源。 - rblanch

6
你是怎么认为 display: none 在4.6版本之前不支持的?你进行了测试,还是只看了文档?
我也不是移动开发人员,所以我只是根据文档中获取到的信息。 BlackBerry Browser 4.6 CSS Reference 确实提到了“可用性:BlackBerry® Device Software 版本4.6或更高版本”对于 display 属性,但他们的 BlackBerry Browser 4.3 Content Developer Guide 表明4.3已经支持了非常有限的 version of the display property,包括 display: none。根据 BlackBerry Browser developer documentation,4.3之前的版本不支持 display 属性。

你能假设用户至少拥有4.3版本的固件吗?还是这和假设他们拥有4.6版本一样不可接受?

你尝试过将宽度和高度设置为零吗?我不熟悉黑莓(浏览器),但我怀疑它的CSS支持在较旧的版本上肯定不完美。如果这样做能奏效,我也不会感到惊讶:

.BBwarn {
    display: none; /* for 4.6 and up */
    width: 0px;    /* for 4.3 */
    height: 0px;
}

但是,从4.3版本开始,所有元素都支持widthheight。在此之前,它们只能应用于<button><img>标签以及某些<input>类型(根据文档)。因此,也许在所有黑莓固件版本上真正使其工作的最安全方法是使用一个警告图像,并使用CSS将其宽度和高度设置为零。如果图像不是一个选项(由于本地化问题或其他原因),一个丑陋的解决办法可能是指定一个空/非法的图像源,并将警告文本放在alt属性中。我不知道将其宽度和高度设置为零是否仍然会隐藏那个alt文本。

3
这个怎么样:
clip: rect(0,0,0,0);

请注意,如果使用"overflow:visible"属性,则剪辑属性将无法正常工作。

在您的情况下:

<div class="BBwarn">
  please activate your css support and a link
</div>

只需添加以下CSS代码:
.BBwarn{
  position: absolute;
  clip: rect(0,0,0,0);
}

3

visibility: hidden; 可以使用,但是该特定 div 占用的空间仍会出现。如果您要使用负 left-margin 方法,请记住需要将对象的 position 设置为 absolute


2

你可以将其绝对定位到屏幕之外。

但是,我也不是移动开发者。


我不知道如何在不使用margin的情况下实现该操作。 - rblanch

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接