web-dev-qa-db-ja.com

表示せずにCSSで何かを隠す：noneまたはJavaScript

display:noneまたはJavaScriptを使用せずにdivを非表示にするにはどうすればよいですか？

私の国では、多くのBlackberryでCSSサポートが無効になっています（ここのモバイル会社は開発者にとってあまり良くありません）。私は言うテキストがあります

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

ユーザーがCSSサポートをアクティブにしたら、それを非表示にしたいのですが、BBファームウェア4.6でのみサポートされているため、display:none;を使用できません。これは公開サイトであり、すべての訪問者をアップグレードさせることはできません。

誰かがこれに対する解決策を知っていますか？質問が今より理解しやすくなることを願っています。

更新：回答ありがとうございますが、使用できません

  • 位置：絶対
  • オーバーフロー

blackberryファームウェア4.6以降から入手できるため

htmlcssblackberrymobile
15
rblanch

これは一般的な方法です。

margin-left: -9999;

12
krusty.ar

試すべきこと：

  • z-indexを使用して、他の要素の後ろに配置します
  • 絶対位置で画面から移動します
  • 可視性：非表示
  • 背景を前景色に設定してコンテンツを「非表示」にします（テキストでのみ機能します）
  • 不透明度：0

しかし、本当の問題は、なぜですか？

9
mfx

どうですか：

  visibility: hidden;

これにより、DIVが非表示になります（レンダリングされても非表示になることに注意してください。つまり、ドキュメント内で表示されているかのようにスペースを取りますが、非表示になります（display：noneとは異なり、divはレンダリングされません）。 ）。

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

ちなみに、これは私が画像をプリロードするために行うことです。これはjavascriptを使用しないので素晴らしいです。

可視性：一部のブラウザーはスマートであり、実際に表示されていると思わない限り要求を行わないため、hiddenは同じことを行いません。

6
Daniel Schaffer

display: noneがバージョン4.6より前ではサポートされていないと思われる理由は何ですか？あなたはそれをテストしましたか、それとも彼らのドキュメントに従っていますか？

私もモバイル開発者ではないので、ドキュメントから収集した内容を使用します。

BlackBerry Browser 4.6 CSSリファレンス は実際にdisplayプロパティに「Availability：BlackBerry®DeviceSoftwareバージョン4.6以降」と記載されていますが、 BlackBerry Browser 4.3コンテンツ開発者ガイド は4.3を示していますdisplay: noneを含む、非常に限定されたバージョンのdisplayプロパティをすでにサポートしています。 4.3より前のバージョンは、displayプロパティをサポートしていません（ここでも、 BlackBerry Browser開発者向けドキュメント を使用しています）。

ユーザーが少なくともファームウェアバージョン4.3を持っていると想定できますか、それとも4.6を持っていると想定するのと同じくらい受け入れられないのでしょうか。

単に幅と高さをゼロに設定してみましたか？私はBlackBerry（Browser）に精通していませんが、確かに古いバージョンでは、CSSのサポートが完全ではないと思います。これがうまくいったとしても私は驚かないでしょう：

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

ただし、widthとheightは、バージョン4.3以降のすべての要素でのみサポートされます。それ以前は、<button>タグと<img>タグおよび一部の<input>タイプにのみ適用できました（ドキュメントによる）。

したがって、BlackBerryファームウェアのすべてのバージョンで実際に機能させる最も安全な方法は、警告に画像を使用し、CSSを使用して幅と高さをゼロに設定することです。

画像がオプションではない場合（おそらく、ローザリゼーションの問題などのため）、醜いハックは、空の/違法な画像ソースを指定し、警告テキストをalt属性に入れることかもしれません。幅と高さをゼロに設定しても、その代替テキストが非表示になるかどうかはわかりません。

5
mercator

シンプルなものを試してみませんか：

position: absolute;
left: -1000px;

なぜうまくいかないのかわかりません。

5
John_

使用している割合が4.6未満であるかどうかはわかりませんが、それが重要である場合は、常にすべての人を満足させることはできないということを受け入れる理由がわかります。これに対する許容可能なカスケードソリューションは達成可能であるはずです。おそらく、cssをアップグレードして有効にすることの利点を説明するためのリンクがあります。

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

ところで-誰かにそれをオンにするように言っているなら、あなたはあなたがcssであることを確認したほうがいいです... :-)

4
Steve Perks

これはどう：

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);
}
3
Abhilesh Srivastava

画面から完全に外して配置できます。

しかし、私もモバイル開発者ではありません。

2
Tom Ritter

BlackberrysはJavaScriptをサポートしていないため、JavaScriptを使用したくないと思います。

反対のことをして、コードのブロックを非表示にしようとするのではなく、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が無効になっているテキストは表示されません...

2
cLFlaVA

visibility: hidden;は機能しますが、その特定のdivが占めるスペースは引き続き表示されます。負のleft-marginメソッドを使用する場合は、オブジェクトのpositionをabsoluteに設定する必要があることに注意してください。

1
cLFlaVA

あなたは賢明なことをすることができます：

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

より正確にするには、次を追加できます。

color:transparent; background-color:transparent;
1
Chaitanya Chauhan

あなたが質問で言ったように4.6より前のBlackberryバージョンの解決策が必要であり、4.6より前のBlackberryバージョンでサポートされているCSSプロパティはほとんどないので、この目的のために何らかのハックを使用できます。テキストcolorを背景に設定するか、font-sizeを0に設定してみてください。これはハックですが、見えなくなります。次のスニペットを実行して、それが機能するかどうかをお知らせください。

.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>
0
Jamil Ahmed

または、Javascriptを有効にしてくださいを使用できます

そして、「CSSを有効にする」と書かれた画像を使用し、「display：none」を使用してスタイルを設定します。

そのため、対応する機能が有効になっている場合は常に、これらの警告は表示されません。

あるいは、サーバー側のコードを使用していると思いますか？特定のバージョンのcss/javascriptをサポートし、それに応じてコンテンツを配信する最も一般的な既知のプラットフォームを検出してみることができます。あなたはそれをすべて自分で書く必要さえないかもしれません。

0
Robin Maben

正確に何が悪いのか（前述）

幅：0高さ：0可視性：非表示

0
Boris Callens

BlackBerry Curve 8530（OS 5.0）でjavascriptを使用して選択ボックスをカスタマイズしようとしたときに、同様の問題が発生しました。ただし、プロパティに続くcssがまだ機能しないため、作成されたメニューを非表示にすることはできませんでした。

display
overflow
position: absolute
visibility
z-index

また、HTML要素の破棄と再作成も機能しなかったため、ここに到達して問題を解決できました。私の答えはここで提起された質問に関するものではないことは知っていますが、問題が発生したときにここに着いたら、それが起こったのは私だけではないと思います。

とにかく、それらのcssプロパティが機能したとしても、私が必要としていたのは、ほとんどのBBモデルで機能するコードでした。

私の解決策は、ここにあるすべての答えを使用して作成されました。簡単でした。私は2つのクラスを作りました：

.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;
}

はい。ページにある要素の種類ごとに2つ作成しました。最初は、すべてのクラスがclass = "element_hidden"に設定されているため、マウスを選択ボックスメニューの上に置くと、すべてのクラスがclass = "element"に変更され、非表示/非表示にされたかのように表示および非表示になります。

これが誰かに役立つことを願っています！ ; D

0
Jayme Tosi Neto

Transformプロパティを使用して、x軸とy軸に沿って要素をスケーリングできます。

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

表示なしでこれを取得するためにフォントサイズを使用しました

font-size: 0px;
0
Ronak Bokaria

幅：0高さ：0可視性：非表示

...ファームウェア2.2以前では常に動作するとは限りません。要素を非表示にできる場合もありますが、特定のキーストローク（アンダースコアなど）で再表示されます。

0
Drew