Скрыть что-то с CSS без отображения: нет или JavaScript

Ответ 1

Это обычный способ:

margin-left: -9999;

Ответ 2

вещи, которые нужно попробовать:

• используйте z-index, чтобы поместить его за какой-то другой элемент
• переместите его с экрана по абсолютному расположению
• вязкость: скрытая
• сделать контент "невидимым", установив фон в цвет переднего плана (работает только для текста)
• непрозрачность: 0

но реальный вопрос: почему?

Ответ 3

Как насчет:

  visibility: hidden;

Это должно скрыть DIV (обратите внимание на то, как он будет отображаться, но будет невидим, это означает, что в документе потребуется пространство в документе, как если бы оно было видимым, но было бы невидимым (в отличие от display: none, где div не будет быть оказанным)).

Ответ 4

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

Кстати, это то, что я делаю для предварительной загрузки изображений, что приятно, потому что он не использует javascript.

Видимость: скрытые не будут делать то же самое, потому что некоторые браузеры умны и не будут делать запрос, если он не считает его фактически видимым.

Ответ 5

Почему бы не попробовать просто:

position: absolute;
left: -1000px;

Я не понимаю, почему это не сработает.

Ответ 6

Что заставляет вас думать, что display: none не поддерживается до версии 4.6? Испытали ли вы это, или вы идете по их документации?

Я тоже не являюсь мобильным разработчиком, поэтому я просто понимаю, что я почерпнул из документации.

BlackBerry Browser 4.6 CSS Reference действительно упоминает "Доступность: BlackBerry® Device Software версии 4.6 или новее" для свойства отображения, но их BlackBerry Browser 4.3 Руководство разработчика контента указывает, что 4.3 уже поддерживает очень ограниченную версию свойства display, включая display: none. Версии до 4.3 не поддерживают свойство display (опять же, идя Документация разработчика BlackBerry Browser).

Можете ли вы предположить, что ваши пользователи, по крайней мере, имеют прошивку версии 4.3, или это так же неприемлемо, если предположить, что у них есть 4.6?

Вы пробовали просто установить ширину и высоту на ноль? Я не знаком с BlackBerry (браузером), но я скептически предполагаю, что его поддержка 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. Я не знаю, поместил бы ли его ширину и высоту в ноль все же спрятал бы этот текст.

Ответ 7

Я не уверен в процентах, о которых вы говорите, 4.6, но если это важно для вас, то я могу видеть обоснование для принятия того, что вы не можете угодить всем людям все время, и приемлемое каскадное решение этого должно быть достижимо. Возможно, со ссылкой, чтобы объяснить преимущества обновления и включения css.

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

Кстати - вам лучше убедиться, что вы css хорошо, если вы говорите кому-то, чтобы включить его...: -)

Ответ 8

Вы можете позиционировать его абсолютно на экране.

Но я тоже не являюсь мобильным разработчиком.

Ответ 9

Я предполагаю, что вы не хотите использовать JavaScript, потому что Blackberry не поддерживают его.

А если бы вы сделали обратное и отобразили блок кода с 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...

Ответ 10

Как насчет этого:

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

Примечание. Обратите внимание, что свойство clip не работает, если используется "overflow: visible".

В твоем случае:

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

просто добавьте этот CSS:

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

Ответ 11

visibility: hidden; будет работать, но пространство, занятое этим конкретным div, по-прежнему будет отображаться. Если вы собираетесь использовать отрицательный метод left-margin, помните, что вам нужно будет установить объект position на absolute.

Ответ 12

Что именно не так (ранее упомянутое)

ширина: 0 высота: 0 видимость: скрытая

Ответ 13

ширина: 0 высота: 0 видимость: скрытая

... Не всегда работает с прошивкой 2.2 и старше. Иногда вы можете заставить элемент скрываться, но он будет появляться с определенными нажатиями клавиш (например, подчеркивание).

Ответ 14

Или вы можете использовать "Включить Javascript"

И используйте изображение, которое читает "Включить CSS" и стирает его, используя "display: none".

Таким образом, всякий раз, когда соответствующая функция включена, эти предупреждения не отображаются.

В качестве альтернативы, я полагаю, вы используете код на стороне сервера? Вы можете попробовать обнаружить наиболее распространенные известные платформы, поддерживающие определенные версии css/javascript, и доставить контент соответствующим образом. Возможно, вам даже не придется писать все сами.

Ответ 15

У меня была аналогичная проблема, когда я пытался настроить поле выбора с помощью javascript в BlackBerry Curve 8530 (OS 5.0). Но созданное меню не может быть скрыто, поскольку свойства 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

Ответ 16

Вы можете сделать что-то вроде мудрых:

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

для уточнения вы можете добавить:

color:transparent; background-color:transparent;

Ответ 17

Мы можем использовать свойство transform для масштабирования элемента по осям x и y.

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

Ответ 18

Я использовал размер шрифта, чтобы получить это без использования дисплея нет

font-size: 0px;

Ответ 19

Как вы сказали в вопросе, вам нужно решение для версии Blackberry ниже 4.6 и очень мало CSS-свойств поддерживаются для версии Blackberry ниже 4.6, поэтому мы можем использовать какой-то взлом для этой цели. Попробуйте установить для текста 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>