使用CSS隐藏某些内容而不显示:none或JavaScript

时间:2008-12-12 16:29:41

标签: html css blackberry mobile

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

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

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

我想隐藏一旦用户激活CSS支持,但我无法使用display:none;,因为它仅在BB固件4.6中受支持。这是一个公共网站,我无法让所有访问者升级。

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

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

  • 位置:绝对
  • 溢出

因为它们可从Blackberry固件4.6及更高版本获得

19 个答案:

答案 0 :(得分:12)

这是一种常见的方式:

margin-left: -9999;

答案 1 :(得分:8)

要尝试的事情:

  • 使用z-index将其置于其他元素之后
  • 通过绝对定位将其移出屏幕
  • 可见性:隐藏
  • 通过将背景设置为前景色(仅适用于文本)使内容“不可见”
  • 不透明度:0

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

答案 2 :(得分:5)

是什么让你觉得版本4.6之前不支持display: none?你测试过它,或者你是按照他们的文档进行测试的?

我也不是移动开发人员,所以我只是按照我从文档中收集的内容进行操作。

BlackBerry Browser 4.6 CSS Reference确实提到了显示属性的“可用性:BlackBerry®DeviceSoftware 4.6或更高版本”,但他们的BlackBerry Browser 4.3 Content Developer Guide表示4.3已经支持{{1}的非常有限的版本} property,包括display。 4.3之前的版本不支持display: none属性(再次通过BlackBerry Browser developer documentation)。

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

您是否尝试过将宽度和高度设置为零?我不熟悉BlackBerry(浏览器),但我怀疑它的CSS支持并不完美,当然在旧版本上。如果这有效,我不会感到惊讶:

display

但是只有从版本4.3开始的所有元素都支持.BBwarn { display: none; /* for 4.6 and up */ width: 0px; /* for 4.3 */ height: 0px; } width。在此之前,它们只能应用于height<button>标记以及一些<img>类型(根据文档)。

因此,真正使其适用于所有BlackBerry固件版本的最安全方法是使用图像作为警告,并使用CSS将其宽度和高度设置为零。

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

答案 3 :(得分:5)

怎么样:

  visibility: hidden;

那应该隐藏DIV,(注意它仍然会被渲染但是看不见,这意味着它会占用文档中的空间,就好像它是可见的,但是不可见(不像display:none; div不会被渲染))。

答案 4 :(得分:4)

我不确定你所说的百分比是否正在使用&lt; 4.6,但如果这对你来说很重要,那么我可以看到接受你不能一直讨好所有人的理由,并且可以实现一个可接受的级联解决方案。可能有一个链接来解释升级和启用css的好处。

height: 0; 
overflow: hidden;
visibility: hidden; 
color: #fff; 
background: #fff; 
顺便说一下 - 如果你告诉别人打开它,你最好确保你的css很好......: - )

答案 5 :(得分:4)

为什么不试试这个简单的:

position: absolute;
left: -1000px;

我不明白为什么它不起作用。

答案 6 :(得分:4)

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

顺便说一下,这就是我要预加载图片的方法,这很好,因为它不使用javascript。

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

答案 7 :(得分:2)

你可以把它完全放在屏幕上。

但我也不是移动开发者。

答案 8 :(得分:2)

我假设您不想使用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的文本...

答案 9 :(得分:1)

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

答案 10 :(得分:1)

如何?

clip: rect(0,0,0,0);

注意:请注意,如果使用“ overflow:visible”,则clip属性不起作用。

在您的情况下:

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

只需添加此CSS:

.BBwarn{
  position: absolute;
  clip: rect(0,0,0,0);
}

答案 11 :(得分:0)

正如您所说的那样,您需要针对 4.6以下的Blackberry版本的解决方案,并且4.6以下的Blackberry版本几乎不支持CSS属性,因此我们可以为此使用某种技巧。尝试将文本color设置为背景,或将font-size设置为0。这是一个hack,但是它使其不可见。运行以下代码段,让我知道它是否适合您。

.alert1 {
    color: #fff; //3.8 or later
    
}

.alert2 {
    font-size: 0; //3.8 or later
}
<b>Alert1</b>
<div class="alert1">
please activate your css support and a link
</div>

<b>Alert2</b>
<div class="alert2">
please activate your css support and a link
</div>

答案 12 :(得分:0)

或者您可以使用请启用Javascript

使用“启用CSS”的图像并使用“display:none”设置样式。

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

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

答案 13 :(得分:0)

(前面提到的)

究竟出了什么问题

宽度:0 身高:0 可见性:隐藏

答案 14 :(得分: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”,它们将被显示和隐藏,就好像它们不可见/可见一样。

我希望这对某人有用! ; d

答案 15 :(得分:0)

你可以做一些明智的事情:

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

为了更精确,您可以添加:

color:transparent; background-color:transparent;

答案 16 :(得分:0)

我们可以使用transform属性沿x和y轴缩放元素。

. BBwarn{
   transform : scale(0,0);
}

答案 17 :(得分:0)

我使用字体大小来获取字体,而没有使用显示

font-size: 0px;

答案 18 :(得分:0)

宽度:0高度:0可见性:隐藏

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

豫ICP备18024241号-1