html - display:none または JavaScript を使用せずに CSS で何かを非表示にする

Question

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

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

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

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

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

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

位置:絶対
オーバーフロー

Blackberry ファームウェア 4.6 以降で利用できるため

score 15 · Accepted Answer

15

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

margin-left: -9999;

于 2008-12-12T16:33:21.903 に答える

score 13 · Accepted Answer

試すべきこと：

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

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

score 11 · Accepted Answer

どうですか：

  visibility: hidden;

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

score 6 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

position: absolute;
left: -1000px;

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

score 6 · Accepted Answer

あなたが話しているパーセンテージが4.6未満を使用しているのかどうかはわかりませんが、それがあなたにとってそれほど重要である場合、すべての人を常に喜ばせることはできないことを受け入れる理由がわかります。これに対する受け入れ可能なカスケードソリューションが実現可能である必要があります。おそらく、css をアップグレードして有効にすることの利点を説明するリンクが含まれています。

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

ところで-誰かにCSSを有効にするように言っている場合は、CSSが適切であることを確認したほうがよいでしょう... :-)

score 5 · Accepted Answer

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

私もモバイル開発者ではないので、ドキュメントから得た情報に基づいています。

BlackBerry Browser 4.6 CSS Referenceでは、実際に表示プロパティについて「利用可能性: BlackBerry® Device Software バージョン 4.6 以降」と記載されていますが、BlackBerry Browser 4.3 Content Developer Guidedisplayでは、4.3 がすでに非常に限定されたバージョンのプロパティをサポートしていることを示していますdisplay: none。display4.3 より前のバージョンでは、このプロパティはサポートされていません(繰り返しますが、 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バージョンheight4.3 以降のすべての要素でのみサポートされます。<button>それ以前は、<img>タグと一部の<input>タイプにのみ適用できました (ドキュメントによると)。

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

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

score 2 · Accepted Answer

Blackberry が 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 を無効にするとテキストが表示されません...

score 2 · Accepted Answer

画面の外に完全に配置できます。

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

そして、「CSS を有効にする」という画像を使用し、「display:none」を使用してスタイルを設定します。

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

正確には何が問題なのですか（前述）

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

于 2008-12-20T02:48:33.193 に答える

score 0 · Accepted Answer

質問で、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>

score 0 · Accepted Answer

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

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

html - display:none または JavaScript を使用せずに CSS で何かを非表示にする

19 に答える 19

Related

Reference