2008-12-12 50 views
10

如何在不使用display:none或JavaScript的情况下隐藏div?用CSS隐藏东西而不显示:无或JavaScript

在我的国家,很多Blackberrys都禁用了CSS支持(这里的移​​动公司对开发者来说不是那么好)。我有文字,说

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

我想隐藏,一旦用户激活CSS的支持,但我不能使用display:none;,因为它是在BB固件4.6只支持。这是一个公共场所,我无法让所有访客都升级。

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

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

  • 位置:绝对
  • 溢出

,因为他们可以从黑莓固件4.6及以上

+0

我知道你想要一个免费的JavaScript的解决方案,但我不禁想知道为什么你不能用javascript去除DOM树中的元素? – 2008-12-13 00:11:51

+0

javascript在默认情况下禁用在相同的手机 – rblanch 2008-12-14 00:13:09

回答

2

你可以将它完全摆脱屏幕。

但我也不是手机开发者。

+0

我不知道如何做到这一点,而不使用保证金 – rblanch 2008-12-12 19:31:16

10

这是一种常见的方式:

margin-left: -9999;

+0

不能在4之前工作。6固件 – rblanch 2008-12-12 19:24:58

+2

在这种情况下,在div替换文本:

please upgrade your device if you want this to go away
并使其大胆的红色和闪烁(如果适用) :仅d – 2008-12-12 21:15:11

1

visibility: hidden;会的工作,而是由特定div仍然会出现所占用的空间。如果您打算使用否定left-margin方法,请记住您需要将对象的position设置为absolute

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

顺便说一句,这是我做的预加载图像,因为它不使用JavaScript,这是很好。

可见性:隐藏不会做同样的事情,因为一些浏览器很聪明,除非它认为其实际可见,否则不会发出请求。

+0

溢出可与4.6及以上 – rblanch 2008-12-12 19:29:07

+0

D'哦!这很糟糕。 – 2008-12-12 19:37:14

+2

我不明白为什么这比使用JavaScript更好?如果没有JS的人来到您的网站,他们会下载一堆他们永远不会看到的图像(假设这些图像用于翻转,灯箱等) – nickf 2008-12-20 02:40:00

7

事情尝试:

  • 使用Z-指数绝对定位把它背后的一些其他元素
  • 移动它关闭屏幕
  • visbility:隐藏
  • 使内容“不可见“(仅适用于文字)
  • 不透明度:0

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

+0

因为我想要警告消失一旦你已经激活css – rblanch 2008-12-12 18:53:45

4

为什么不试试简单:

position: absolute; 
left: -1000px; 

我不明白为什么它是行不通的。

3

如何:

visibility: hidden; 

这应该隐藏DIV,(注意如何将仍然被渲染,但不可见,这意味着它需要的空间在文件中,如果它是可见的,但不可见(不像display:none; div不会被渲染))。

1

我想你不想使用JavaScript,因为Blackberrys不支持它。

如果你做了相反的事情,并用JavaScript显示代码块,而不是试图隐藏它呢?

<script type="text/javascript"><!-- 
document.open(); 
document.writeln('<div class="BBwarn">'); 
document.writeln('please activate your css support and a link'); 
document.writeln('</div>'); 
document.close(); 
//--></script> 

这是一个黑客位,但不会与禁用了JavaScript显示的文字...

4

我不知道你在谈论正在使用< 4.6的百分比,但如果这对你来说很重要,那么我可以看到一个理由,即接受你不能让所有人满意,并且可以实现一个可接受的层叠解决方案。可能通过链接来解释升级和启用css的好处。

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

顺便说一句 - 你最好确保你的CSS是好的,如果你告诉别人打开它... :-)

5

什么让你觉得不支持display: none在版本4.6之前?你测试过了吗,还是要通过他们的文档?

我也不是移动开发者,所以我只是从文档中搜集的内容。

BlackBerry Browser 4.6 CSS Reference的确提到了“可用性:BlackBerry®设备软件版本4.6或更高版本”的显示属性,但其BlackBerry Browser 4.3 Content Developer Guide表明,4.3已经支持display财产非常有限的版本,包括display: none。 4.3之前的版本不支持display属性(再次,BlackBerry Browser developer documentation)。

你能假设你的用户至少有固件版本4.3,或者就像假设他们有4.6一样不可接受?

您是否尝试过简单地将宽度和高度设置为零?我对BlackBerry(浏览器)并不熟悉,但我怀疑地认为它的CSS支持不够完美,当然在旧版本中。我也不会感到惊讶,如果这个工作:

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

但随后widthheight仅支持从4.3版本开始的所有元素。在此之前,他们只能应用于<button><img>标记和一些<input>类型(根据文档)。

所以也许最安全的方法是让它在所有黑莓固件版本上都可以正常工作,就是使用图像进行警告,并使用CSS将宽度和高度设置为零。

如果图像不是一个选项(由于lozalization问题左右,也许),一个丑陋的黑客可能是指定一个空/非法图像源,并将警告文本在alt属性。我不知道如果将其宽度和高度设置为零,仍然会隐藏该替代文字。

0

到底是什么毛病(先前提到的)

宽度:0 高度:0 visibility:hidden的

0

宽度:0高度:0 visibility:hidden的

...没有并不总是适用于固件2.2及更高版本。有时候你可以隐藏一个元素,但是它会重新出现某些击键(比如下划线)。

0

或者你可以使用请启用Javascript

,并使用该读取图像“启用CSS”,它使用样式“显示:无”。

因此,无论何时启用相应的功能,这些警告都不会显示。

或者,我认为你正在使用一些服务器端代码?您可以尝试检测支持特定版本的css/javascript的最常见的已知平台并相应地提供内容。你甚至不需要自己写所有的东西。

0

当我尝试在BlackBerry Curve 8530(OS 5.0)中使用javascript自定义选择框时,我遇到了类似的问题。但是,创建因为CSS下列属性不能被隐藏的菜单仍然不起作用:

display 
overflow 
position: absolute 
visibility 
z-index 

,破坏并重新创建HTML元素也不能工作,所以我来到这里,并能解决我的问题。 我知道我的答案并不完全是关于这里提出的问题,但是一旦我遇到问题时,我想我并不是唯一一个发生和将要发生的问题。

无论如何,即使这些CSS属性工作,我需要的是一些代码可以在大多数BB模型上工作。

我的解决方案是使用这里找到的所有答案。这很简单。我做了两类:

.element 
{ 
    width: 100px; 
    height: 100px; 
    font-size: 12px; 
    color: black; 
    background-color: transparent; 
    border: 1px solid black; 
} 
.element_hidden 
{ 
    width: 0px; 
    height: 0px; 
    font-size: 0px; 
    color: white; 
    background-color: white; 
    border: none; 
} 

是的。我为我的页面中的每种元素制作了其中两种。 最初,所有的类都被设置为class =“element_hidden”,所以当鼠标移到选择框菜单上时,所有的类都变为class =“element”,并且它们被显示和隐藏,就好像它们被制作为不可见/可见。

我希望这可以对某人有用!为更加准确,你可以添加

.class{ 
opacity:0; overflow:hidden; visibility: hidden; height:0; 
} 

:; d

0

你可以这样做明智

color:transparent; background-color:transparent;